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.

Usage

Import the component:

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

Basic usage with required properties:

<Button>Click me</Button>

Variants

The Button component supports multiple visual variants to communicate different levels of emphasis and intent.

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.

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 an 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