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...
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 | enumprimarysecondaryghostdangeroutlinedoutlineicon | "primary" | Visual style variant ("icon" is a convenience alias for outlined + icon-only layout) |
size | enumsmmdlg | "md" | Button size |
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