Get Started

Welcome Why We're Different Choosing a Variant Changelog License

Components

Overview Alert Dialog Checkbox Collapsible Dialog Field Input Menu Number Field Popover Progress Radio Scroll Area Select Separator Slider Switch Tabs Toggle

Tooltip

Shared Components

Input Textarea Card Avatar Table Alert Breadcrumb Pagination

0installs

Components

Maps

GitHub stars

Home Docs Components StaticToggle

Toggle

A two-state button that can be either on or off. Built on Base UI Toggle primitives.

Usage

import { ToggleRoot } from "@/components/ui/static/toggle"

<ToggleRoot pressed={pressed} onPressedChange={setPressed}>
  <TextB className="h-4 w-4" />
</ToggleRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react @phosphor-icons/react

Examples

Text Formatting

Text Alignment

Sizes

API Reference

pressedboolean

The controlled pressed state.

defaultPressedboolean

=false

Initial pressed state when uncontrolled.

onPressedChange(pressed: boolean) => void

Callback when pressed state changes.

disabledboolean

=false

Whether the toggle is disabled.

variant"default" | "outline"

="default"

The visual style variant.

size"default" | "sm" | "lg"

="default"

The size of the toggle.

Toggle

A two-state button that can be either on or off. Built on Base UI Toggle primitives.

Usage

import { ToggleRoot } from "@/components/ui/static/toggle"

<ToggleRoot pressed={pressed} onPressedChange={setPressed}>
  <TextB className="h-4 w-4" />
</ToggleRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react @phosphor-icons/react

Examples

Text Formatting

Text Alignment

Sizes

API Reference

pressedboolean

The controlled pressed state.

defaultPressedboolean

=false

Initial pressed state when uncontrolled.

onPressedChange(pressed: boolean) => void

Callback when pressed state changes.

disabledboolean

=false

Whether the toggle is disabled.

variant"default" | "outline"

="default"

The visual style variant.

size"default" | "sm" | "lg"

="default"

The size of the toggle.