Components
ToggleButton
A button with a controlled on/off pressed state, exposed via aria-pressed.
ToggleButton is a Button with a binary pressed state — think bold, mute, or
pin. It is fully controlled: pass pressed and handle onPressedChange, which
fires with the next value. The pressed state is reflected with aria-pressed
and an accent style, and it forwards the rest of the Button props.
Example
Preview
import { ToggleButton } from '@officina/ui';
import { useState } from 'react';
function BoldToggle() {
const [bold, setBold] = useState(false);
return (
<ToggleButton pressed={bold} onPressedChange={setBold}>
Bold
</ToggleButton>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onPressedChange* | (pressed: boolean) => void | — | Called with the next pressed state when toggled. |
| pressed* | boolean | — | Whether the toggle is currently pressed/active. |
| isLoading | boolean | — | Show a loading spinner and disable the button while an action is in flight. |
| size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | null | — | |
| variant | "primary" | "secondary" | "outline" | "ghost" | "soft" | "danger" | "success" | null | ghost |