Button

Triggers an action. Native <button> attributes and ref pass through. With render, a link (or another element) gets the same look.

Kumo source

import { PlusIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";

export function Preview() {
  return (
    <div className="stack">
      <Button icon={<PlusIcon />}>New run</Button>
      <Button variant="primary" icon={<PlusIcon />}>
        New run
      </Button>
      <Button loading>New run</Button>
    </div>
  );
}

Installation

import { Button } from "@etched/reticle/button";

Examples

Variants

import { Button, type ButtonVariant } from "@etched/reticle/button";

const variants: ButtonVariant[] = ["primary", "secondary", "ghost", "quiet", "outline", "destructive", "secondary-destructive"];

export function Variants() {
  return (
    <div className="row">
      {variants.map((v) => (
        <Button key={v} variant={v}>
          {v}
        </Button>
      ))}
    </div>
  );
}

Sizes

import { PlusIcon } from "@phosphor-icons/react";
import { Button, type ButtonSize } from "@etched/reticle/button";

const sizes: ButtonSize[] = ["sm", "base"];

export function Sizes() {
  return (
    <div className="row">
      {sizes.map((s) => (
        <Button key={s} size={s} icon={<PlusIcon />}>
          New run
        </Button>
      ))}
    </div>
  );
}

Icons

Icon-only buttons are square or round and need an aria-label.

import { DotsThreeIcon, DownloadSimpleIcon, PlusIcon, TrashIcon, XIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";

export function Icons() {
  return (
    <div className="row">
      <Button variant="primary" icon={<PlusIcon />}>
        Add chip
      </Button>
      <Button icon={<DownloadSimpleIcon />}>Export</Button>
      <Button variant="secondary-destructive" icon={<TrashIcon />}>
        Delete
      </Button>
      <Button shape="square" aria-label="More actions" icon={<DotsThreeIcon />} />
      <Button shape="square" variant="ghost" aria-label="Close" icon={<XIcon />} />
      <Button shape="circle" variant="outline" aria-label="Add" icon={<PlusIcon />} />
    </div>
  );
}

States

loading shows a spinner in place of the icon and disables the button.

import { Button } from "@etched/reticle/button";

export function States() {
  return (
    <div className="row">
      <Button disabled>Disabled</Button>
      <Button variant="primary" disabled>
        Disabled
      </Button>
      <Button loading>Saving</Button>
      <Button variant="primary" loading>
        Saving
      </Button>
    </div>
  );
}

Links

render gives a link the button's look, in every variant and size. It gets no type; when disabled, aria-disabled and a stopped click.

Open trace New run All runs Locked trace

import { PlusIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";

export function Links() {
  return (
    <div className="row">
      <Button render={<a href="#trace-1284" />}>Open trace</Button>
      <Button variant="primary" size="sm" render={<a href="#new-run" />} icon={<PlusIcon />}>
        New run
      </Button>
      <Button variant="ghost" render={<a href="#runs" />}>
        All runs
      </Button>
      <Button disabled render={<a href="#locked" />}>
        Locked trace
      </Button>
    </div>
  );
}

API reference

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "quiet" \| "destructive" \| "secondary-destructive" \| "outline"	"secondary"
size	"sm" \| "base"	"base"
icon	ReactNode	–	Icon element shown before the label, for example `<PlusIcon />`.
loading	boolean	–	Shows a spinner in place of the icon and disables the button.
render	ReactElement<{ className?: string }>	–	Renders another element with the button's look, props and children, such as a link: `render={<a href="/runs/1284" />}` or a router link. It gets no `type`, and `aria-disabled` (its click stops) in place of `disabled`.
shape	"base" \| "square" \| "circle"	"base"	Square or round, as wide as it is high.
aria-label	string	–
aria-labelledby	string	–