Toggle

A two-state button that can be either on or off.

Loading…

"use client"

import { BookmarkIcon } from "lucide-react"

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

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
      <BookmarkIcon
        data-icon="inline-start"
        className="group-aria-pressed/toggle:fill-current"
      />
      Bookmark
    </Toggle>
  )
}

Installation

pnpm dlx shadcn@latest add @kickresume/toggle

Usage

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

<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
  <BookmarkIcon
    data-icon="inline-start"
    className="group-aria-pressed/toggle:fill-current"
  />
  Bookmark
</Toggle>

Examples

Outline

Use variant="outline" for an outline style.

Loading…

"use client"

import { BoldIcon, ItalicIcon } from "lucide-react"

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

export default function ToggleOutline() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle italic">
        <ItalicIcon data-icon="inline-start" />
        Italic
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle bold">
        <BoldIcon data-icon="inline-start" />
        Bold
      </Toggle>
    </div>
  )
}

With Text

Loading…

"use client"

import { ItalicIcon } from "lucide-react"

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

export default function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <ItalicIcon data-icon="inline-start" />
      Italic
    </Toggle>
  )
}

Size

Use the size prop to change the size of the toggle.

Loading…

"use client"

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

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

Disabled

Loading…

"use client"

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

export default function ToggleDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle disabled" disabled>
        Disabled
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
        Disabled
      </Toggle>
    </div>
  )
}

Segmented

Use variant="segmented" to fill the toggle with the primary color when it is pressed.

Loading…

"use client"

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

export default function ToggleSegmented() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="segmented" defaultPressed aria-label="Toggle active">
        Active
      </Toggle>
      <Toggle variant="segmented" aria-label="Toggle inactive">
        Inactive
      </Toggle>
    </div>
  )
}

Pill

Use variant="pill" for a fully rounded pill style.

Loading…

"use client"

import { SparklesIcon } from "lucide-react"

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

export default function TogglePill() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="pill" defaultPressed aria-label="Toggle AI">
        <SparklesIcon data-icon="inline-start" />
        AI
      </Toggle>
      <Toggle variant="pill" aria-label="Toggle remote">
        Remote
      </Toggle>
    </div>
  )
}

API Reference

See the Base UI Toggle documentation.