Button

A versatile button component with support for multiple visual variants, sizes, and a built-in loading spinner. Extends native HTML button attributes and is built with class-variance-authority for consistent styling.

Import

import { Button } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Button variant="default" size="default">
  Click me
</Button>

<Button variant="destructive" loading>
  Deleting...
</Button>

<Button variant="outline" size="lg" disabled>
  Disabled
</Button>

Props

Prop	Type	Default	Description
`variant`	'default' \| 'destructive' \| 'outline' \| 'subtle' \| 'ghost' \| 'link'	`'default'`	Visual style variant of the button.
`size`	'default' \| 'sm' \| 'lg' \| 'icon'	`'default'`	Size of the button. The icon size renders a square button.
`loading`	boolean	`false`	Whether the button is in a loading state. Displays a spinner and disables interaction.
`disabled`	boolean	`false`	Whether the button is disabled.
`children`	ReactNode	-	The content rendered inside the button.
`className`	string	-	Additional CSS classes to apply.

The component also accepts all standard HTML <button> attributes such as onClick, type, and aria-* props.