---
title: "IconButton"
description: "A button that shows only an icon. Its required label is both its accessible name and the tooltip that names it on hover and keyboard focus."
---

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

# IconButton

## In a table row

```tsx
import { ArchiveIcon, PencilSimpleIcon, TrashIcon } from '@phosphor-icons/react';
import { IconButton } from '@arbol-ai/ui';

<div className="flex items-center gap-1">
  <IconButton icon={<PencilSimpleIcon />} label="Edit the appointment" size="sm" />
  <IconButton icon={<ArchiveIcon />} label="Archive the appointment" size="sm" />
  <IconButton icon={<TrashIcon />} label="Delete the appointment" size="sm" />
</div>
```

## Looks and sizes

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

<div className="flex items-center gap-2">
  <IconButton icon={<DownloadSimpleIcon />} label="Export the report" variant="outline" />
  <IconButton
    icon={<DownloadSimpleIcon />}
    label="Export the contacts"
    size="lg"
    variant="secondary"
  />
</div>
```

## Source

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

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