104Get started
HextaUI

Toggle: Pill

shape="pill" rounds the ends fully, for toggles inside rounded surfaces like a chat composer.

import { IconSparkles, IconWorld } from "@tabler/icons-react"

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

export function TogglePill() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle shape="pill" defaultPressed>
        <IconSparkles />
        Think
      </Toggle>
      <Toggle shape="pill" variant="outline">
        <IconWorld />
        Search
      </Toggle>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/toggle-pill.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"
shape
"default" | "pill""default"
defaultPressed
booleanfalse

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