Logobaseui-cn

Toggle

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

Newformprimitiveinteractive
Loading preview...

Installation

npx baseui-cn add toggle

Usage

import { Toggle } from "@/components/ui/toggle"
<Toggle aria-label="Toggle bold">
  <Bold className="size-4" />
</Toggle>

Examples

With text

A toggle with an icon and text label.

Loading preview...

Outline

Use variant="outline" for a bordered style.

Loading preview...

Sizes

Available in sm, default, and lg sizes.

Loading preview...

Disabled

Loading preview...

API

Toggle

PropTypeDefaultDescription
variant"default" | "outline""default"Border and background treatment — transparent (default) or outlined
size"sm" | "default" | "lg""default"Height, min-width, and padding scale

API Reference

See the Base UI Toggle documentation for the full API reference, including all props, data attributes, and CSS classes.