Button — Frontfriend

Interactive preview

Built on Reka UI. Component colors, typography and styling come from your Design System.

Installation

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

npx frontfriend download button -f vue --primitive reka --registry v4

Review dependencies reported by the downloader and keep your source changes in version control.

Usage & composition

Reka uses Vue slots and bindings. Use as-child for trigger composition and v-model:open for a controlled dialog. React JSX examples are not interchangeable with Vue templates.

<script setup lang="ts">
import { Button } from '@/components/ui/button';
</script>

<template>
  <Button variant="main" size="default">
    Make it happen
  </Button>
</template>

Loading and icon-only actions

Use loading and loadingText for asynchronous feedback. Disable duplicate submission in your own action handler as well. Use a configured icon name and provide an accessible label for an icon-only button.

<Button :loading="saving" loading-text="Saving…">Save changes</Button>

API reference

Frontfriend-owned props and selected target integration points. Native HTML and inherited primitive props remain documented by Reka UI.

Prop / part	Type	Default	Purpose
`variant`	main \| default \| outline \| secondary \| ghost \| destructive \| tertiary \| ghostmain \| link \| linkDestructive	`default`	Visual intent, resolved from the design-system config.
`size`	xs \| sm \| default \| lg \| icon \| icon-xs \| icon-sm \| icon-lg	`default`	Text and icon sizing choices.
`loading`	boolean	`false`	Show the configured loading treatment. Review duplicate-activation behavior in your app.
`loadingText`	string	`—`	Optional text shown while loading.
`icon`	configured icon name	`—`	Use an icon available in the system icon map.
`iconPosition`	prefix \| suffix \| default	`default`	Prefix/suffix with text; default is the icon-only position when icon is set.
`fullwidth`	boolean	`false`	Select the configured full-width variant.
`disabled`	boolean	`false`	Prevent activation using the target’s native disabled behavior.
`@click`	event handler	`—`	Handle activation with the selected target.

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

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.