Installation
Complete project setup first. Your configuration
must select react/aria and include your Design System ID.
pnpm exec frontfriend download button -f react --primitive ariaReview dependencies reported by the downloader and keep your source changes in version control.
Usage
<Button variant="main">Button</Button>Loading and icon-only actions
Use loading and loadingText for asynchronous feedback, and prevent duplicate submission in your own action handler as well. Use a configured icon name and give an icon-only button an accessible label.
Accessibility
- Use a button for actions and a link for navigation. React Aria also exposes a target-specific
LinkButton. - Give icon-only controls an accessible name.
- Preserve a visible keyboard focus indicator and communicate asynchronous status.
- Disabled and loading behavior must prevent unintended repeated actions.
Examples
Main
<Button variant="main">Button</Button>Secondary
<Button variant="secondary">Button</Button>Tertiary
<Button variant="tertiary">Button</Button>Destructive
<Button variant="destructive">Button</Button>Ghost
<Button variant="ghost">Button</Button>Ghost Main
<Button variant="ghostmain">Button</Button>Link
<Button variant="link">Button</Button>Link Destructive
<Button variant="linkDestructive">Button</Button>Full Width
<Button variant="main" fullwidth>Button</Button>API reference
Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | |
fullwidth | "true" | "false" | — | Stretch the button to the width of its container. |
icon | keyof typeof icons | — | Icon to display on the button |
iconPosition | "prefix" | "suffix" | "default" | "default" | |
loading | boolean | false | |
loadingText | string | — | |
size | "xs" | "default" | "sm" | "icon" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | |
variant | "main" | "default" | "destructive" | "tertiary" | "outline" | "secondary" | "ghost" | "ghostmain" | "link" | "linkDestructive" | "default" |
Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.