Toggle Button

Button that stays pressed or unpressed (aria-pressed), e.g. bold in a toolbar.

Import

import { ToggleButton } from '@marbleui/ui'

Props

<ToggleButton>

Prop	Type	Default	Description
variant	`'soft' \| 'outline'`	`'outline'`

Also accepts React Aria props (105).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria ToggleButton. Follow the primitive's docs for the full keyboard map.

Usage notes

A single button that stays pressed or unpressed, such as bold or star. For an on/off setting use Switch; for a set of related toggles use ToggleButtonGroup; for a one-shot action use Button.

<ToggleButton defaultSelected>Starred</ToggleButton>
<ToggleButton variant="soft" isSelected={bold} onChange={setBold}>Bold</ToggleButton>

Uncontrolled: defaultSelected. Controlled: isSelected + onChange (React Aria ToggleButton).
variant is outline (default) or soft. Selected state shows through the accent colors.
Icon-only toggles need an aria-label. The pressed state is exposed to assistive tech as aria-pressed.

Example source · show

import { ToggleButton } from './toggle-button'

const Star = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" aria-hidden>
    <path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z" />
  </svg>
)

export const styles = {
  Outline: () => (
    <div className="flex gap-2">
      <ToggleButton defaultSelected><Star /> Starred</ToggleButton>
      <ToggleButton>Pin</ToggleButton>
    </div>
  ),
  Soft: () => (
    <div className="flex gap-1">
      <ToggleButton variant="soft" defaultSelected>Bold</ToggleButton>
      <ToggleButton variant="soft">Italic</ToggleButton>
      <ToggleButton variant="soft">Underline</ToggleButton>
    </div>
  ),
}

Source: packages/ui/src/toggle-button/toggle-button.tsx

Catalog

Category: inputs
Priority: Foundation
Primitive: react-aria
React Aria: ToggleButton
Base UI: Toggle