ToggleButton
A button that toggles between on and off states, with the same variant, intent, size, and rounded system as Button. Shows a persistent pressed visual when active.
Installation
pnpm add @tessinaui/uiUsage
import { ToggleButton } from "@tessinaui/ui";<ToggleButton>Star</ToggleButton>Playground
Configure every property of the ToggleButton component interactively:
Preview
Loading...
Showcase
All variants, intents, sizes, and states — including live toggling:
Preview
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | — | Controlled pressed state |
defaultPressed | boolean | false | Initial pressed state for uncontrolled usage |
onPressedChange | (pressed: boolean) => void | — | Callback fired when pressed state changes |
variant | "primary" | "secondary" | "ghost" | "outline" | "primary" | Visual style |
intent | "none" | "error" | "warning" | "success" | "info" | "none" | Semantic color intent |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Button size |
rounded | "full" | "lg" | "md" | "sm" | "none" | "full" | Border radius |
leadingIcon | React.ReactNode | — | Icon rendered before the label. Replaced by a spinner when loading |
trailingIcon | React.ReactNode | — | Icon rendered after the label. Hidden when loading |
loading | boolean | false | Shows a spinner in place of the leading icon and disables the button |
disabled | boolean | false | Disables the button and prevents toggling |
dir | "ltr" | "rtl" | — | Text direction — RTL reverses icon/label order via CSS flex |
Controlled vs Uncontrolled
Controlled — manage pressed state externally:
const [starred, setStarred] = useState(false);
<ToggleButton pressed={starred} onPressedChange={setStarred}>
{starred ? "Starred" : "Star"}
</ToggleButton>Uncontrolled — let the component manage its own state:
<ToggleButton defaultPressed={false} onPressedChange={(p) => console.log(p)}>
Star
</ToggleButton>Accessibility
The ToggleButton component:
- Renders a
<button>witharia-pressedreflecting the current toggle state data-pressedattribute is set to"true"or"false"for CSS styling hooks- Keyboard accessible: Enter and Space toggle the button
- Focus ring visible with 2px ring + 2px offset (matches design system standard)
- Disabled state prevents toggling and is reflected via the native
disabledattribute - Touch targets ≥ 44×44px on all sizes
ButtonGroup
A group of pill buttons inside a rounded pill container, supporting horizontal and vertical orientations with configurable gap
Bottom Nav
Mobile bottom navigation bar in two styles — a full-width dock and an iOS-style floating pill. Controlled or uncontrolled active state. Badge support (dot or count). LTR and RTL.