bmates-uiBMates UI
Latest
/Components

Toggle

A two-state button for an on/off formatting or view option.

A two-state button for an on/off formatting or view option.

Import

import { Toggle } from 'bmates-ui';

Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Toggle aria-label="Toggle bold">Bold</Toggle>

Preview

Toggle

Prop previews

The examples below isolate the props that change visual output or interaction.

Sizes

Sizes

Selection states

Selection states

Component API

selected

Initial pressed state. Updates when the prop changes.

size

Toggle size.

disabled

Prevents interaction. Native button props are supported.

Usage notes

  • Every component in the table is exported from bmates-ui.
  • Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
  • For application-owned state, use a controlled value and its change handler instead of only a default* prop.