# Toggle

Button that toggles between pressed and unpressed states

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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[​](#toggle-1 "Direct link to Toggle")

Button that toggles between pressed and unpressed states

**Source:** [`packages/appkit-ui/src/react/ui/toggle.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/toggle.tsx)

### Props[​](#props "Direct link to 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[​](#usage "Direct link to Usage")

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

<Toggle /* props */ />

```