Linkalternative
Use Link for navigation without action contextButton
Interactive element for user actions and form submissions
Setup
import { Button } from '@fragments-sdk/ui';Examples
Primary
Default action button for primary actions
Loading preview...
Secondary
Less prominent action button
Loading preview...
Ghost
Minimal visual weight for subtle actions
Loading preview...
Link
Accent-coloured transparent button for tertiary CTAs
Loading preview...
Danger
Destructive action requiring attention
Loading preview...
Outline
Bordered button with transparent background
Loading preview...
Icon
Convenience icon-only button alias (ghost + square icon sizing)
Loading preview...
Sizes
Available size options
Loading preview...
Disabled
Non-interactive state
Loading preview...
As Child
Compose button styles onto another interactive element while preserving forwarded props
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | enumbuttona | button | Render as a native button or anchor element |
childrenRequired | node | Not set | Button label content |
variant | enumlinkprimarysecondaryghostdangeroutlinedoutlineicon | "primary" | Visual style variant ("icon" is a convenience alias for outlined + icon-only layout, "link" is accent-coloured + transparent for tertiary CTAs) |
size | enumxssmmdlg | "md" | Button size ("xs" is for inline row-action controls where "sm" is too tall) |
icon | boolean | false | Render as icon-only button (square aspect ratio). Useful with any visual variant; variant="icon" is the default outlined icon-only shortcut. |
fullWidth | boolean | false | Make button full width of container |
asChild | boolean | false | Merge button styling onto child element (e.g. Next.js Link) |
Usage Guidelines
When to use
- Triggering an action (save, submit, delete, etc.)
- Form submission
- Opening dialogs or menus
- Navigation when action context is needed
When not to use
- Simple navigation (use Link)
- Toggling state (use Switch or Checkbox)
- Selecting from options (use Select or RadioGroup)
Best practices
- Use Primary for the main action in a context
- Only one Primary button per section/form
- Use Danger variant for destructive actions
- Loading state should disable the button
- When using asChild, pass interaction and accessibility props directly on Button (they are forwarded to the child element)
- Use variant="icon" for the default icon-only action button, or combine icon={true} with another visual variant when needed
Accessibility
- Button text should describe the action
- Avoid generic labels like "Click here"
- Icon-only buttons need aria-label