Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Toggle

Button that toggles between pressed and unpressed states

## Example​

    import { Bold } from "lucide-react"

    import { Toggle } from "@databricks/appkit-ui/react"

    export default function ToggleExample() {
      return (
        <Toggle aria-label="Toggle bold">
          <Bold className="h-4 w-4" />
        </Toggle>
      )
    }

## Toggle​

Button that toggles between pressed and unpressed states

Source: `packages/appkit-ui/src/react/ui/toggle.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`pressed` | `boolean` |  | - | The controlled state of the toggle.
`defaultPressed` | `boolean` |  | - | The state of the toggle when initially rendered. Use `defaultPressed` if you do not need to control the state of the toggle. @defaultValue false
`onPressedChange` | `((pressed: boolean) => void)` |  | - | The callback that fires when the state of the toggle changes.
`asChild` | `boolean` |  | - | -
`variant` | `"default" | "outline" | null` |  | - | -
`size` | `"default" | "sm" | "lg" | null` |  | - | -

### Usage​

    import { Toggle } from '@databricks/appkit-ui';

    <Toggle /* props */ />