Toggle

A two-state button that can be pressed or unpressed, commonly used for formatting controls.

Installation

pnpm dlx stera-ui add toggle

Usage

import { Toggle } from "@/components/ui/toggle"
<Toggle aria-label="Toggle bold">
  <SiTextBold />
</Toggle>

Variants

VariantDescription
defaultNo border, background appears on hover/press
outlineBordered with a surface background
<Toggle variant="outline" aria-label="Toggle bold">
  <SiTextBold />
</Toggle>

With Text

<Toggle aria-label="Toggle italic">
  <SiTextItalic />
  Italic
</Toggle>

Sizes

SizeDescription
xsExtra small
smSmall
mdMedium (default)
lgLarge
iconSquare icon button
icon-xsExtra small icon button
icon-smSmall icon button
icon-lgLarge icon button

Disabled

<Toggle disabled aria-label="Toggle underline">
  <SiTextUnderline />
</Toggle>

API Reference

Built on Base UI's Toggle primitive.

PropTypeDefault
variant"default" | "outline""default"
size"xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""md"
pressedboolean—
defaultPressedboolean—
onPressedChange(pressed: boolean) => void—
disabledbooleanfalse