Actions & selectionBrick 0.1.2

Toggle

Toggle is a persistent pressed/unpressed command built on Atom Toggle with Brick visual recipes.

Live example

Built from the published package

Interactive

Choose with confidence

Know when Toggle is the right part

Use it when

Use it for commands such as Favorite, Pin, Bold, or Show completed when the control keeps the same meaning in both states.

Choose another path when

Use Button for one-shot actions, Checkbox for submitted choices, and ToggleGroup for related pressed commands. Toggle has no loading, tone, or icon placement API.

Installation and imports

tsx

import { Toggle } from "@flowstack-ui/brick/toggle";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/toggle.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Toggle is also exported from @flowstack-ui/brick.

Quick start

tsx

<Toggle aria-label="Favorite" defaultPressed>Favorite</Toggle>

Visual recipes and states

Each variant keeps a distinct resting and pressed treatment. Sizes change the whole control geometry; pill changes radius; iconOnly makes the control square. Atom exposes pressed, hover, focus, active, and disabled state.

Examples

tsx

<Toggle variant="outline" pressed={pinned} onPressedChange={setPinned}>
  Pin
</Toggle>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are Toggle, ToggleProps, ToggleVariant, ToggleSize, and ToggleShape.

Prop	Values	Default
`variant`	`solid`, `soft`, `outline`, `ghost`	`soft`
`size`	`sm`, `md`, `lg`	`md`
`shape`	`rounded`, `pill`	`rounded`
`iconOnly`	`boolean`	`false`

Atom supplies pressed, defaultPressed, onPressedChange, disabled, native button props, asChild, and render. Native color and standalone value are excluded.

Shared responsibility

Accessibility

Atom owns button activation and aria-pressed. Keep the accessible name stable between states and provide a complete name for icon-only controls. Brick owns visible focus, target geometry, contrast, and forced-color presentation.

Responsive behavior

Text may wrap under narrow constraints. Geometry uses logical properties and works in RTL. The application owns placement and breakpoint behavior.

Stable visual contract

Styling and tokens

Customization

Choose props first, then semantic or public Toggle tokens. Use className or style for a local exception while preserving pressed and focus distinction.

Tokens and CSS hooks

Stable hooks are .brick-toggle, slot toggle, data-variant, data-size, data-shape, data-icon-only, data-state, and data-disabled. Public tokens are --brick-toggle-min-block-size, --brick-toggle-padding-inline, --brick-toggle-gap, --brick-toggle-radius, and --brick-toggle-icon-size.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground