---
title: "Button"
description: "Interactive element for triggering actions"
source: "Equality"
---
import React from "react";
import { Button } from "@eqtylab/equality";
import { ArrowUp, Grid3X3, ArrowRight } from "lucide-react";

## 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:

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

Basic usage with required properties:

```tsx
<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.

{

<div className="flex gap-2">
  <Button variant="primary" size="lg">
    Primary LG
  </Button>
  <Button variant="primary" size="md">
    Primary MD
  </Button>
  <Button variant="primary" size="sm">
    Primary SM
  </Button>
</div>
}

### Secondary

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

{

<div className="flex gap-2">
  <Button variant="secondary" size="lg">
    Secondary LG
  </Button>
  <Button variant="secondary" size="md">
    Secondary MD
  </Button>
  <Button variant="secondary" size="sm">
    Secondary SM
  </Button>
</div>
}

### Tertiary

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

{

<div className="flex gap-2">
  <Button variant="tertiary" size="lg">
    Tertiary LG
  </Button>
  <Button variant="tertiary" size="md">
    Tertiary MD
  </Button>
  <Button variant="tertiary" size="sm">
    Tertiary SM
  </Button>
</div>
}

### Danger

Use the `danger` variant For destructive actions like delete or remove.

{

<div className="flex gap-2">
  <Button variant="danger" size="lg">
    Danger LG
  </Button>
  <Button variant="danger" size="md">
    Danger MD
  </Button>
  <Button variant="danger" size="sm">
    Danger SM
  </Button>
</div>
}

### 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.

{

<div className="flex gap-2">
  <Button variant="warning" size="lg">
    Warning LG
  </Button>
  <Button variant="warning" size="md">
    Warning MD
  </Button>
  <Button variant="warning" size="sm">
    Warning SM
  </Button>
</div>
}

### Link

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

{

<div className="flex gap-2">
  <Button variant="link" size="lg">
    Link LG
  </Button>
  <Button variant="link" size="md">
    Link MD
  </Button>
  <Button variant="link" size="sm">
    Link SM
  </Button>
</div>
}

### 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".

{(() => {
const arrowRight = React.createElement(ArrowRight);
return (

<div className="flex gap-2">
  <Button variant="navigation" size="lg" suffix={arrowRight}>
    Navigation LG
  </Button>
  <Button variant="navigation" size="md" suffix={arrowRight}>
    Navigation MD
  </Button>
  <Button variant="navigation" size="sm" suffix={arrowRight}>
    Navigation SM
  </Button>
</div>
); })()}

## Icons

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

### With Prefix Icon

{(() => {
const prefixIcon = React.createElement(Grid3X3);
return (

<div className="flex gap-2">
  <Button variant="primary" size="lg" prefix={prefixIcon}>
    Prefix LG
  </Button>
  <Button variant="primary" size="md" prefix={prefixIcon}>
    Prefix MD
  </Button>
  <Button variant="primary" size="sm" prefix={prefixIcon}>
    Prefix SM
  </Button>
</div>
); })()}

### With Suffix Icon

{(() => {
const suffixIcon = React.createElement(ArrowUp);
return (

<div className="flex gap-2">
  <Button variant="primary" size="lg" suffix={suffixIcon}>
    Suffix LG
  </Button>
  <Button variant="primary" size="md" suffix={suffixIcon}>
    Suffix MD
  </Button>
  <Button variant="primary" size="sm" suffix={suffixIcon}>
    Suffix SM
  </Button>
</div>
); })()}

### Usage

```tsx
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`.

```tsx
<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.

{

<div className="flex gap-2">
  <Button variant="primary" size="sm" disabled>
    Disabled Primary
  </Button>
  <Button variant="secondary" size="sm" disabled>
    Disabled Secondary
  </Button>
  <Button variant="tertiary" size="sm" disabled>
    Disabled Tertiary
  </Button>
  <Button variant="danger" size="sm" disabled>
    Disabled Danger
  </Button>
  <Button variant="navigation" size="sm" disabled>
    Disabled Navigation
  </Button>
</div>
}

## Slots

| Name       | Description                                     |
| ---------- | ----------------------------------------------- |
| `children` | The button label content                        |
| `prefix`   | Content displayed before the label (e.g., icon) |
| `suffix`   | Content displayed after the label (e.g., icon)  |

## Props

| Name       | Description                                      | Type                                                                          | Default   | Required |
| ---------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | --------- | -------- |
| `variant`  | The visual style of the button                   | `primary`, `secondary`, `tertiary`, `danger`, `warning`, `link`, `navigation` | `primary` | ❌       |
| `size`     | The size of the button                           | `sm`, `md`, `lg`                                                              | `md`      | ❌       |
| `prefix`   | Content to display before the button label       | `ReactNode`                                                                   | -         | ❌       |
| `suffix`   | Content to display after the button label        | `ReactNode`                                                                   | -         | ❌       |
| `href`     | URL for link buttons (renders as anchor element) | `string`                                                                      | -         | ❌       |
| `target`   | Link target (when href is provided)              | `string`                                                                      | -         | ❌       |
| `rel`      | Link rel attribute (when href is provided)       | `string`                                                                      | -         | ❌       |
| `download` | Makes link downloadable (when href is provided)  | `string`, `boolean`                                                           | -         | ❌       |
| `asChild`  | Merge props onto child element                   | `boolean`                                                                     | `false`   | ❌       |
| `disabled` | Disables the button                              | `boolean`                                                                     | `false`   | ❌       |