Button — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download button -f vue --primitive reka

Review 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 Reka UI.

Prop	Type	Default	Description
`as`	`keyof HTMLElementTagNameMap`	`—`
`asChild`	`boolean`	`—`
`class`	`string`	`—`
`fullwidth`	`ButtonVariants["fullwidth"]`	`—`	Stretch the button to the width of its container
`icon`	`IconName`	`—`	Icon to display on the button
`iconPosition`	`ButtonVariants["iconPosition"]`	`—`	Position of the icon in the button
`loading`	`boolean`	`—`	Show a loading spinner in the button
`loadingText`	`string`	`—`	Text to display when the button is loading
`size`	`ButtonVariants["size"]`	`—`	Size of the button
`variant`	`ButtonVariants["variant"]`	`—`	Variant of the button

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.