Toggle

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

Basic Usage

Basic toggles

With text

Variants

Sizes

Controlled

State: Not bookmarked

Disabled

ToggleToggle button variations

Installation

pnpm add @corew500/ui

Usage

import { Toggle } from "@mordecai-design-system/ui"

<Toggle aria-label="Toggle bold">
  <BoldIcon className="size-4" />
</Toggle>

Examples

Basic

<Toggle aria-label="Toggle italic">
  <ItalicIcon className="size-4" />
</Toggle>

With Text

<Toggle aria-label="Toggle notifications">
  <BellIcon className="size-4" />
  Notifications
</Toggle>

Outline Variant

<Toggle variant="outline" aria-label="Toggle settings">
  <SettingsIcon className="size-4" />
</Toggle>

Sizes

<Toggle size="sm" aria-label="Small">
  <StarIcon className="size-4" />
</Toggle>

<Toggle size="default" aria-label="Default">
  <StarIcon className="size-4" />
</Toggle>

<Toggle size="lg" aria-label="Large">
  <StarIcon className="size-4" />
</Toggle>

Controlled

const [pressed, setPressed] = useState(false)

<Toggle pressed={pressed} onPressedChange={setPressed}>
  <BookmarkIcon className="size-4" />
  {pressed ? 'Saved' : 'Save'}
</Toggle>

Disabled

<Toggle disabled aria-label="Disabled toggle">
  <MoonIcon className="size-4" />
</Toggle>

Props

Prop	Type	Default	Description
`variant`	enum	`default`	Visual style variant. - `default`: Transparent background with muted fill when pressed - `outline`: Bordered variant with subtle shadow
`size`	enum	`default`	Size variant affecting height and padding. - `sm`: Compact 8px height - `default`: Standard 9px height - `lg`: Large 10px height
`pressed`	enum	—	Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`.
`defaultPressed`	enum	`false`	Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`onPressedChange`	(pressed: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void	—	Callback fired when the pressed state is changed.
`value`	string	—	A unique string that identifies the toggle when used inside a toggle group.
`nativeButton`	enum	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Accessibility

Always provide an aria-label when using icon-only toggles
The toggle automatically manages aria-pressed state
Keyboard navigation: Space or Enter to toggle