General
Button
Triggers an action. Seven variants, five sizes, and a 3px press offset that collapses under prefers-reduced-motion.
Variants
Import
import { Button } from "@mikenotthepope/substrateui"Sizes
icon is 40px, the height of a default button. icon-sm is 36px, so it lines up with a sm control beside it instead of standing a notch taller. Neither meets the 44px target size on its own — see Accessibility below.
With Icons
Loading State
Accessibility
Icon-only buttons (size="icon", or buttons with no visible text children) MUST provide an aria-label so assistive technology can announce what the control does.
The default button height is 40px. For mobile-primary contexts, prefer size="lg" (44px) to meet WCAG 2.5.5 touch target guidance.
The press-down animation respects prefers-reduced-motion and is disabled for users who request reduced motion.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "secondary-fill" | "ghost" | "link" | "default" | Which token family paints the button. secondary is the tinted surface; secondary-fill is the saturated one. amber still works as an alias for secondary-fill but is deprecated — it named the colour plum happens to use, and every theme colours that slot differently. |
size | "default" | "sm" | "lg" | "icon" | "icon-sm" | "default" | Controls the height, padding, and border-radius of the button. `icon` is a 40px square, `icon-sm` a 36px one for the row where the other controls are `sm`. |
render | ReactElement | — | Render a different element instead of a <button> tag, merging the button's props onto it. Useful for rendering links styled as buttons: render={<a href=… />}. |
className | string | — | Additional CSS classes to apply to the button element. |
disabled | boolean | false | When true, prevents interaction and reduces opacity. Inherited from the native button element. |