Button

Usage

By default, buttons will hug their content, but can expand to fill the surrounding container, especially for smaller elements (e.g. modal).

They are usually found in various parts of the UI, including:

import { Button } from "@smartacteam/ui/button";

<Button variant="secondary">Button</Button>

Basics

Buttons should follow these principles:

Primary (default)

Primary Button is used as our default call-to-action. It is used to guide the user toward a goal, such as making a purchase, signing up for a newsletter, etc.

Secondary

A Secondary Button usually directs the user to an alternative action that’s not as critical or urgent as the primary goal, but still valuable.

Ghost Buttons

Ghost Buttons are typically used for less important actions.

Confirmation

A Confirmation Button is often used in user interfaces to signify a successful action or confirmation. Green is widely associated with positive outcomes, such as success, completion, or approval.

Warning

A Warning Button is typically used to draw attention to actions that require caution or alert the user about something important, but not necessarily something that’s urgent or critical.

Destructive

A Destructive Button is typically used to alert users about serious actions that could lead to negative consequences if not carefully considered.

Sizes

The default size is medium (default).

Loading

Typically used to let users know that their request is being handled and should allow some time for the process to complete.

Disabled

Disabled buttons are not interactive or clickable. They are typically styled in a way that indicates they are inactive or unavailable, such as being grayed out or faded.