---
title: "Button"
description: "An action on the current page. One filled button per area marks the usual next step; outline, secondary and ghost buttons carry the rest. Use ButtonLink when the action navigates."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

## Variants

```tsx
import { Button } from '@arbol-ai/ui';

<div className="flex flex-wrap items-center gap-2">
  <Button>Save changes</Button>
  <Button variant="outline">Cancel</Button>
  <Button variant="secondary">Duplicate</Button>
  <Button variant="ghost">Skip</Button>
  <Button variant="link">Learn more</Button>
  <Button variant="destructive">Delete contact</Button>
</div>
```

## Sizes and icons

Icon-only buttons need an aria-label; a title adds a visible hint.

```tsx
import { DownloadSimpleIcon, PlusIcon, TrashIcon } from '@phosphor-icons/react';
import { Button } from '@arbol-ai/ui';

<div className="flex flex-wrap items-center gap-2">
  <Button size="sm">
    <PlusIcon /> New
  </Button>
  <Button>
    <DownloadSimpleIcon /> Export
  </Button>
  <Button size="lg">Book appointment</Button>
  <Button aria-label="Delete row" size="icon" title="Delete row" variant="ghost">
    <TrashIcon />
  </Button>
</div>
```

## Pending

While an action runs the button keeps focus, ignores presses and shows a spinner.

```tsx
import { useState } from 'react';
import { Button } from '@arbol-ai/ui';

const PendingExample = () => {
  const [isPending, setIsPending] = useState(false);
  return (
    <Button
      isPending={isPending}
      onPress={() => {
        setIsPending(true);
        setTimeout(() => {
          setIsPending(false);
        }, 1500);
      }}
    >
      {isPending ? 'Saving…' : 'Save changes'}
    </Button>
  );
};

<PendingExample />
```

## Link styled as a button

```tsx
import { ButtonLink } from '@arbol-ai/ui';

<ButtonLink href="#/button" variant="outline">
  Open the list
</ButtonLink>
```

## The look on another element

buttonVariants gives a router’s link or another library’s trigger the same look, hover and keyboard focus included.

```tsx
import { ArrowLeftIcon } from '@phosphor-icons/react';
import { buttonVariants } from '@arbol-ai/ui';

<a className={buttonVariants({ variant: 'ghost', size: 'sm' })} href="#/button">
  <ArrowLeftIcon aria-hidden /> Back to the agenda
</a>
```

## Source

The examples above are [`src/components/button/button.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/button/button.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/actions/button/index.mdx