Button | Arbol UI

Language

Appearance

Variants

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.

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.

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

Open the list

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.

Back to the agenda

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