Button — Frontfriend

Interactive preview

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

Installation

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

npx frontfriend download button -f react --primitive radix --registry v4

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

Usage & composition

Radix uses asChild to compose a trigger with your Button. Forward the ref and spread the incoming props when composing with a custom child.

import { Button } from '@/components/ui/button';

export function Example() {
  return (
    <Button variant="main" size="default"
      onClick={() => console.log('Let’s build')}>
      Make it happen
    </Button>
  );
}

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} loadingText="Saving…">Save changes</Button>

API reference

Frontfriend-owned props and selected target integration points. Native HTML and inherited primitive props remain documented by Radix 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.
`onClick`	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.