ButtonTriggers a click action usually performed by the user to trigger an event such as submitting a form or closing a dialog.

Button component is used for primary actions, such as submitting forms, confirming decisions, or initiating important processes.

Install the component from your command line.

npm install @raystack/apsara

Import all parts and piece them together.

import { Button } from '@raystack/apsara/v1'

<Button variant="solid" color="accent">Click here!</Button>

The Button component accepts the following props:

variant: Visual style variant ("solid" | "outline" | "ghost" | "text", default: "solid")
color: Color theme ("accent" | "danger" | "neutral" | "success", default: "accent")
size: Size of the button ("small" | "normal", default: "normal")
disabled: Whether the button is disabled (boolean, default: false)
loading: Shows a loading spinner inside the button (boolean)
loaderText: Optional text to display next to the loading spinner (ReactNode)
leadingIcon: Icon element to display before button text (ReactNode)
trailingIcon: Icon element to display after button text (ReactNode)
maxWidth: Custom maximum width for the button (string | number)
width: Custom width for the button (string | number)
asChild: Boolean to merge props onto child element
className: Additional CSS class names
All other ButtonHTMLAttributes from React

Variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes. Default is solid.

Colors help convey the purpose and importance of actions. The color prop only affects solid and outline variants. Default is accent.

The Button component offers two size options. Default size is normal.

The Button component provides a "disabled" state, which prevents the button from responding to any user actions. Default is false.

The Button component offers inbuilt loading states. Loading state is used to signify an ongoing process after the user has clicked on the button.

The button component accepts optional leading and/or trailing icons.