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

Usages

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

Installation

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="primary">Click here!</Button>

Props

The Button component accepts the following props:

variant: Visual style variant ("primary" | "secondary" | "outline" | "ghost" | "danger" | "text", default: "primary")
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)
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

Variant

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

Scale

The Button component offers two size options to accommodate various design requirements. By selecting the normal size, you can create buttons that are visually larger, making it more prominent and noticeable within the user interface. Default size is normal.

Disabled

The Button component provides a "disabled" state, which prevents the button from responding to any user actions. When a button is disabled, it becomes unclickable and does not trigger any associated actions or events. This feature is useful when you want to indicate that a button is temporarily inactive or unavailable for interaction. 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. Loading is an optional prop. Note: A loading as true only disables the button click and displays a spinner within the button. loading does not changes the button appearance as disabled. For changing the appearance to disabled state, a disabled prop as true has to passed.

With leading and trailing icons

The button component accepts optional leading and/or trailing icons. A ReactNode can be passed as a prop.