Button

Perform an action.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Button example
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/shim-ui/button";

export default () => (
  <Button className="self-start">
    Next <ArrowRightIcon size={16} />
  </Button>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add button

Size

Use the size prop to set the size of the button.

Size example
import { Button } from "@/shim-ui/button";

export default () => (
  <>
    <Button size={1}>Size 1</Button>
    <Button size={2}>Size 2</Button>
    <Button size={3}>Size 3</Button>
    <Button size={4}>Size 4</Button>
  </>
);

Intent

Use the intent prop to set the semantic color.

Intent example
import { Button } from "@/shim-ui/button";

export default () => (
  <>
    <Button intent="neutral">Neutral</Button>
    <Button intent="accent">Accent</Button>
    <Button intent="success">Success</Button>
    <Button intent="warning">Warning</Button>
    <Button intent="danger">Danger</Button>
  </>
);

Variant

Use the variant prop to set the visual style.

Variant example
import { Button } from "@/shim-ui/button";

export default () => (
  <>
    <Button variant="soft">Soft</Button>
    <Button variant="solid">Solid</Button>
    <Button variant="ghost">Ghost</Button>
  </>
);

Content

Buttons can contain a label, icon, or both. Use icons by passing an icon component as a child.

If the only child is an SVG element, the button will be sized to a square. Control this with the isIconOnly prop.

Accessibility note
If a visible label isn't specified, an aria-label should be provided for accessibility.
Content example
import {
  ArrowsClockwiseIcon,
  CalendarPlusIcon,
  LinkIcon,
  TrashIcon,
} from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/shim-ui/button";

export default () => (
  <>
    <Button aria-label="Refresh" intent="accent">
      <ArrowsClockwiseIcon size={16} />
    </Button>

    <Button aria-label="Delete" intent="danger">
      <TrashIcon size={16} />
    </Button>

    <Button intent="neutral">
      <LinkIcon size={16} />
      Copy link
    </Button>

    <Button intent="accent">
      <CalendarPlusIcon size={16} />
      Add event
    </Button>
  </>
);

Disabled

Use the isDisabled prop to disable the button.

Disabled example
import { Button } from "@/shim-ui/button";

export default () => (
  <>
    <Button isDisabled variant="soft">
      Soft
    </Button>
    <Button isDisabled variant="ghost">
      Ghost
    </Button>
  </>
);

Pending

Use the isPending prop to display a loading spinner while preserving the button's width. The button remains disabled during the pending state.

Pending example
"use client";
import { useState } from "react";
import { Button } from "@/shim-ui/button";

export default () => {
  let [isPending, setPending] = useState(false);
  let handlePress = () => {
    setPending(true);
    setTimeout(() => setPending(false), 5000);
  };

  return (
    <Button isPending={isPending} onPress={handlePress}>
      Bookmark
    </Button>
  );
};