ButtonButtons play a vital role in user interfaces, serving as interactive elements that initiate actions or facilitate navigation within an application. They provide users with clickable elements to interact with the system and perform various tasks.

Usages

Button component is utilized for clear and concise communication. It 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'

<Button variant="primary">primary button</Button>

Variant

The Button component provides various variants to enhance the visual appearance of buttons. you can create buttons with different variants such as:

Primary
Outline
Secondary
Ghost
Danger

These variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes within your user interface.

Scale

The Button component offers different size options to accommodate various design requirements. By selecting the "large" size, you can create buttons that are visually larger, making them more prominent and noticeable within the user interface. Additionally, the Button component also supports the following size options:

Small
Medium
Large

These different size options allow you to customize the appearance of buttons to suit your specific design needs.

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.