Button
Polymorphic, accessible button with four variants, five sizes, loading state, optional dropdown, and href support.
Preview
example.tsxtsx
Installation
Install the individual package:
snippet.bashbash
pnpm add @sisyphos-ui/button @sisyphos-ui/coreOr use the umbrella package that bundles everything:
snippet.bashbash
pnpm add @sisyphos-ui/uiUsage
Import the component styles and the component itself:
snippet.tsxtsx
import "@sisyphos-ui/button/styles.css";
import { Button } from "@sisyphos-ui/button";Variants
Four visual treatments.
example.tsxtsx
Semantic colors
Pick a color token to communicate intent.
example.tsxtsx
Sizes
example.tsxtsx
Loading state
`aria-busy` is set and click is suppressed while loading.
example.tsxtsx
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "contained" | "outlined" | "text" | "soft" | "contained" | Visual treatment. |
| color | "primary" | "success" | "error" | "warning" | "info" | "primary" | Semantic color token. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Button size. |
| loading | boolean | false | Show a loading spinner; suppresses clicks. |
| startIcon | ReactNode | — | Icon rendered before the label. |
| endIcon | ReactNode | — | Icon rendered after the label. |
| href | string | — | When set, renders the button as an anchor. |
| dropdownItems | ButtonDropdownItem[] | — | Inline split-button menu items. |
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README.
Accessibility
aria-busyapplied while loading; click suppressed.aria-disabledmirrorsdisabled.- Dropdown uses
aria-haspopup="menu"+aria-expanded; items exposerole="menuitem".