Button
The primary action, with busy and disabled states
Sizes
Installation
npx shadcn@latest add @sudokw/primitives-buttonimport { Button } from "@gpuixui/primitives";Usage
import { Button } from "@gpuixui/primitives";
<Button variant="primary" onActivate={save}>
Save changes
</Button>;API reference
| Prop | Type | Default | Consequence |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "primary" | paint from the variant table |
size | "sm" | "md" | "lg" | "md" | height and padding from density |
square | boolean | false | icon-only geometry |
fullWidth | boolean | false | width: 100% |
disabled | boolean | false | blocks activation, leaves the tab order |
tabIndex | number | 0, or -1 while disabled | the action's Tab stop; a caller's value wins both ways |
loading | boolean | false | spinner, Loading description, blocks activation |
loadingLabel | string | the provider's loading.busy (Loading) | the spinner's accessible name |
reducedMotion | boolean | the provider's preference (false when none) | lands the busy spinner at rest; the prop wins |
leading / trailing | ReactNode | none | icon or element beside the label |
label | string | none | accessible name; required for an icon-only button |
onActivate | (event: EventPayload) => void | none | click or activating key, with that event; not called while busy |
onClick | (event) => void | none | raw click, called before onActivate |
onKeyDown / onKeyUp | (event: KeyEvent) => void | none | composed after the activation |
onFocus / onBlur | (event) => void | none | composed before the button's own |
onMouseEnter / onMouseLeave / aria-description | the tooltip trigger pair and its words | none | a Tooltip forwards them; a hover lands on the element itself |
ref | Ref<PublicInstance> | none | the element itself, for a caller that focuses or measures it |
className | string | none | joined last |
style | StyleDesc | none | merged last |
testId | string | none | stable locator |
children | ReactNode | none | visible label |
Keyboard
- EnterSpace
- activates the button
read from Button.tsx
Edit this page on GitHubapps/docs/content/docs/components/button.mdx