Button

Triggers an action.

import { Button } from "@arshad/ui/components/button";

export function Basic() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Solid</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="plain">Plain</Button>
    </div>
  );
}

Defaults to type="button" so it never submits forms by accident. While pressed it scales to 97%, unless the reader prefers reduced motion.

Sizes

import { Button } from "@arshad/ui/components/button";

export function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline" size="sm">
        Small
      </Button>
      <Button variant="outline" size="md">
        Medium
      </Button>
      <Button variant="outline" size="lg">
        Large
      </Button>
    </div>
  );
}

Colors

import { Button } from "@arshad/ui/components/button";

export function Colors() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button color="dark/white">Dark/white</Button>
      <Button color="neutral">Neutral</Button>
      <Button color="accent">Accent</Button>
      <Button color="success">Success</Button>
      <Button color="danger">Danger</Button>
    </div>
  );
}

Icons

Place an Icon on either side of the label. Icon-only buttons need an aria-label.

import { Button } from "@arshad/ui/components/button";
import { Icon } from "@arshad/ui/components/icon";

export function Icons() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button color="accent">
        <Icon name="Plus" />
        New project
      </Button>
      <Button color="neutral">
        Open
        <Icon name="ArrowUpRight" />
      </Button>
      <Button variant="outline" aria-label="Toggle theme">
        <Icon name="Sun" />
      </Button>
    </div>
  );
}

Elevated

Opt in to isElevated for an inset highlight on solid buttons.

import { Button } from "@arshad/ui/components/button";

export function Elevated() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button isElevated color="neutral">
        Settings
      </Button>
      <Button isElevated color="accent">
        Settings
      </Button>
    </div>
  );
}

Loading

Pass disabled and drop a dot matrix loader in as the icon for a loading state. Mark the loader aria-hidden, since the label already says what is happening.

import { Button } from "@arshad/ui/components/button";
import { Diffusion } from "@arshad/ui/components/dot-matrix/diffusion";

export function Loading() {
  return (
    <Button variant="outline" disabled>
      <Diffusion aria-hidden />
      Generating…
    </Button>
  );
}

Link

A link keeps its own semantics and takes the button look from buttonVariants, which accepts the same variants.

Introduction
import Link from "next/link";
import { buttonVariants } from "@arshad/ui/components/button";
import { Icon } from "@arshad/ui/components/icon";
import type { Route } from "next";

export function AsLink() {
  return (
    <Link href={"/ui" as Route} className={buttonVariants({ color: "neutral" })}>
      Introduction
      <Icon name="ArrowUpRight" />
    </Link>
  );
}

API

PropTypeDefault
variant"solid" | "outline" | "plain""solid"
color"neutral" | "dark/white" | "accent" | "success" | "danger""dark/white" when solid, "neutral" otherwise
size"sm" | "md" | "lg""md"
isElevatedbooleanfalse

Plus everything from Base UI Button, including render and disabled.