Toggle

A two-state button that can be either on or off.

Usage

  • Toggle component takes in variant, size and disabled props along with className.
Variants
Sizes
Disabled
Custom Component

Variants

Default

<Toggle>Default</Toggle>

Outline

<Toggle variant="outline">Outline</Toggle>

Sizes

Normal

<Toggle>Normal</Toggle>

Small

<Toggle size="sm">Small</Toggle>

Large

<Toggle size="lg">Large</Toggle>

Disabled

<Toggle disabled>Disabled</Toggle>

Custom Component

<Toggle>
  <Bold className="h-4 w-4 mr-2" /> Bold
</Toggle>
SliderToggle Group

    Theme

    Presets

    Background

    Custom:

    Primary

    Custom:

    Secondary

    Custom:

    Border

    Custom:

    Mode

    Light
    Dark