HextaUI

Toggle: With text

Icons and labels sit side by side. Toggles with visible text don't need an aria-label.

import { IconItalic, IconTextWrap } from "@tabler/icons-react"

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

export function ToggleText() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle>
        <IconItalic />
        Italic
      </Toggle>
      <Toggle variant="outline" defaultPressed>
        <IconTextWrap />
        Wrap lines
      </Toggle>
      <Toggle variant="outline">Show hidden files</Toggle>
    </div>
  )
}

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

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

To add only the component, follow the Toggle installation.

Props in this example

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

PropTypeDefault
variant
"default" | "outline""default"
defaultPressed
booleanfalse

Every prop is in the Toggle API reference.

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