General
Button
Triggers an action. Seven variants, four sizes, and a 3px press offset that collapses under prefers-reduced-motion.
Variants
Import
import { Button } from "@mikenotthepope/substrateui"Sizes
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" | "default" | Controls the height, padding, and border-radius of the button. |
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. |