Button

Overview

Buttons are interactive elements that trigger actions when clicked. They are used for form submissions, dialogs, and other user interactions where the user performs an action. Multiple visual variants communicate different levels of emphasis and intent.

Usage

Import the component:

import { Button } from "@eqtylab/equality";

Basic usage with required properties:

<Button>Click me</Button>

Variants

Primary

As the default variant, the primary variant is used for main call-to-action buttons and intended next steps.

Secondary

Use the secondary variant to call out actions that are of secondary importance in comparison to a primary action.

Tertiary

Use the tertiary variant for most other lower-emphasis actions.

Danger

Use the danger variant for destructive actions like delete or remove.

Success

Use the success variant for actions that approve or confirm the validity of something, such as approving a control’s implementation. Do not use them for standard “next step” or “submit” type buttons where we typically use primary instead.

Warning

Use the warning variant for actions the user should pause over but that are not destructive, such as archiving something that can be restored later. Reserve danger for actions that cannot be undone.

Link

Use the link variant for buttons that should be styled as a link but with button semantics.

Navigation

Use the navigation variant for navigation elements that require button styling. These should only be used for navigation and never for form actions like “next” or “previous”.

Icons

Buttons can display icons before or after the label using the prefix and suffix props.

With Prefix Icon

With Suffix Icon

Usage

import { ArrowRight, Grid3X3 } from 'lucide-react';

<Button prefix={<Grid3X3 />}>With Prefix</Button>
<Button suffix={<ArrowRight />}>With Suffix</Button>

As a Link

When an href prop is provided, buttons render as anchor elements while maintaining their styling. This should be used in favor of onClick events when using buttons for navigation.

Button also accepts common HTML link-related properties such as target, and download.

<Button href="https://example.com" target="_blank">New Tab Link Button</Button>
<Button href="https://example.com/file.pdf" download>Link Button</Button>

Disabled

Buttons tagged with the disabled property are non-interactive and visually muted.

Slots

Props