104Get started
HextaUI

Toggle: Outline

variant="outline" adds a border and a surface, for toggles that sit on their own.

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

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

export function ToggleOutline() {
  return (
    <div className="flex items-center gap-2">
      <Toggle variant="outline" aria-label="Bookmark">
        <IconBookmark />
      </Toggle>
      <Toggle variant="outline">
        <IconBookmark />
        Bookmark
      </Toggle>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/toggle-outline.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"

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