Components / actions
Button
Triggers an action or event. Use Primary for the single main action on a screen, Secondary or Outline for supporting actions, Ghost for low-emphasis actions, and Danger for destructive actions.
import { Button } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Button } from '@basiiik/ui';
<Button>Save changes</Button>- Hover, Pressed and Focused are CSS (:hover, :active, :focus-visible); Disabled uses the native disabled attribute; Loading is the loading prop (spinner, aria-busy, aria-disabled, clicks blocked, stays focusable).
- Storybook: Actions/Button.
Props
| Prop | Type | Notes |
|---|---|---|
variant | "primary" | "secondary" | "outline" | "ghost" | "danger" | Default "primary" |
size | "sm" | "md" | "lg" | Default "md" |
children | native attribute | |
leadingIcon | ReactNode | |
trailingIcon | ReactNode | |
disabled | native attribute | |
loading | boolean |
States. Hover, Pressed and Focused are CSS (:hover, :active, :focus-visible); Disabled uses the native disabled attribute; Loading is the loading prop (spinner, aria-busy, aria-disabled, clicks blocked, stays focusable).
Native attributes such as className, id and data-* are forwarded to the root element.
Use it when
- Trigger an action such as save, submit, open, delete
- One Primary per view; Secondary/Outline for supporting actions; Ghost for low emphasis; Danger for destructive
Do not use it when
- Navigating to another page (use Link)
- Icon-only actions (use Icon Button)
Rules for agents
- At most one primary Button per view
- Use variant="danger" only for destructive actions, and confirm anything irreversible
- Use type="submit" only for the main action of a form; every other button keeps type="button"
Avoid
- Using a Button to navigate to another page (use Link)
- Several primary Buttons competing in the same view
- Disabling a Button without explaining what is missing
- Vague labels such as 'Click here' or 'OK' when a specific verb fits
- A Button with an icon and no text (use Icon Button with an aria-label)
Writing the content
- Start with a verb that says what happens: 'Save changes', 'Delete file'
- Keep labels to 1-3 words
- Use sentence case
Keyboard
- Enter and Space activate
- Tab moves focus
Accessibility
- aria-disabled when disabled but focusable
- aria-busy while loading
Colour tokens it reads
color.bg.brand.activecolor.bg.brand.defaultcolor.bg.brand.hovercolor.bg.brand.subtlecolor.bg.brand.subtle-hovercolor.bg.danger.defaultcolor.bg.danger.hovercolor.bg.disabledcolor.bg.mutedcolor.bg.subtlecolor.bg.surfacecolor.border.brandcolor.border.defaultcolor.border.focuscolor.border.subtlecolor.text.brandcolor.text.disabledcolor.text.on-brandcolor.text.on-dangercolor.text.primaryRelated
actions 90 Figma variants Try it in the live demo