Button
stableThe Kura button: six variants, four sizes, loading state, asChild, tactile press and a signal focus ring.
Installation
npx shadcn@latest add https://kuro.abstergo.fyi/r/button.jsonCopies the source into components/kura/button with its dependencies (kura-theme, spinner, utils). Tokens come from the kura-theme item.
When to use it
Use it for
- Any clickable action: submit, confirm, cancel, open.
- Links that should look like buttons (use asChild with your router's Link).
Reach for something else when
- Icon-only actions — use icon-button (it enforces an accessible label and adds a tooltip).
- Approve/deny decisions for agent actions — use approval-prompt.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "ghost" | "outline" | "accent" | "danger" | "primary" | primary = ink call to action; accent = the AI signal color (max one per view); danger = destructive. |
| size | "xs" | "sm" | "md" | "lg" | "md" | Height 24 / 28 / 32 / 40px. |
| loading | boolean | false | Shows a spinner, sets aria-busy and disables the button while keeping its width. |
| asChild | boolean | false | Render the single child element (e.g. <a> or <Link>) with button styles. |
All native attributes of the root element, className and ref pass through.
Anatomy
- buttonVariantsFunction returning the class string, for non-button elements.
Accessibility
- Defaults to type="button" so it never submits forms by accident; pass type="submit" explicitly.
- Disabled and loading buttons use the native disabled attribute.
- Focus ring: 1px canvas gap + 2px signal ring, only on :focus-visible.
- Reduced motion: The 0.97 press scale is disabled; color transitions remain.
| Keys | Action |
|---|---|
| Enter / Space | Activate |
| Tab | Move focus |
Notes for agents
- Use `accent` only for the single most AI-specific action in view (e.g. “Run agent”). Default to `primary`.
- Icons inside are auto-sized; do not add size classes unless you need a non-default size.