104Get started
HextaUI

Toggle: Sizes

sm, default and lg. Icon-only toggles stay square.

import { IconBold } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleSizes() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Toggle size="sm" aria-label="Bold, small">
          <IconBold />
        </Toggle>
        <Toggle aria-label="Bold">
          <IconBold />
        </Toggle>
        <Toggle size="lg" aria-label="Bold, large">
          <IconBold />
        </Toggle>
      </div>
      <div className="flex items-center gap-2">
        <Toggle size="sm" variant="outline">
          Small
        </Toggle>
        <Toggle variant="outline">Default</Toggle>
        <Toggle size="lg" variant="outline">
          Large
        </Toggle>
      </div>
    </div>
  )
}

Add this example

This adds the example as components/examples/toggle/sizes.tsx, together with the Toggle component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/toggle-sizes.json

To add only the component, follow the Toggle installation.

Props in this example

The Toggle props this example sets, from the API reference.

Toggle

PropTypeDefault
variant
"default" | "outline""default"
size
"default" | "sm" | "lg""default"

Every prop is in the Toggle API reference.

More Toggle examples

See them all, with keyboard support and accessibility notes, on the Toggle page.

Related components