elementstableutility
Button
Pressable with modifiers (contained, outline, modern, link, flat, raised) and utilities (tones, rounds, sizes, icons). Taxonomy from Integrity UI (my own prior work, rewritten); tones from harv semantic tokens.
harv (personal site) · used in harv, harv-components · no dependencies
Examples
Modifiers
Tones
Sizes & shapes
With icons
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "modern" | "ghost" | "flat" | "raised" | "link" | "default" | Visual modifier. Contained by default; modern is a soft tonal fill; raised adds elevation. |
| tone | "default" | "danger" | "warning" | "info" | "success" | "default" | Semantic tone. Composes with contained, outline, and modern variants. |
| size | "xs" | "sm" | "md" | "lg" | "icon" | "md" | Height scale. icon renders a square button for icon-only content. |
| shape | "default" | "pill" | "square" | "default" | Corner treatment. Ignored by the link variant. |
| block | boolean | false | Stretch to the full width of the container. |
Changelog
2026-10-07 — v0.1.0 — initial release
- Modifiers, tones, sizes, shapes, and icon support as documented.
Previews on this page render from the entry's own source file — registry/harv/button/button.tsx. No demo copies.