IconButton | Arbol UI

Language

Appearance

In a table row

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

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, which the library’s tests render too.