Toggle
Toggle is a persistent pressed/unpressed command built on Atom Toggle with Brick visual recipes.
Built from the published package
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, semantic status tone, or icon placement API.
Installation and imports
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:
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
Visual recipes and states
Each variant keeps a distinct resting and pressed treatment. Tone selects an
accent or neutral pressed-state palette without implying status. Sizes change the
whole control geometry; pill changes radius; iconOnly makes the control
square. Atom exposes pressed, hover, focus, active, and disabled state.
Neutral solid selection uses a strong theme-derived neutral surface with the normal foreground instead of the inverse black/white pair.
Outline selection uses the tone's solid accent for its border while preserving the normal primary foreground. The recipe does not add a soft fill.
Disabled Toggles use a faded disabled foreground and quiet surface; selected disabled state does not retain the enabled outline or inset selection edge.
Examples
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, ToggleTone,
ToggleSize, and ToggleShape.
| Prop | Values | Default |
|---|---|---|
variant | solid, soft, outline, ghost | soft |
tone | accent, neutral | accent |
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.
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.
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-tone, 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.