Button

Source code

Triggers an action.

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

export default function ButtonDemo() {
  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. Submit buttons get a subtle press animation.

Sizes

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

export default function ButtonSizesDemo() {
  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 "@/ui/button";

export default function ButtonColorsDemo() {
  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 "@/ui/button";
import { Icon } from "@/ui/icon";

export default function ButtonIconsDemo() {
  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 elevated for an inset highlight on solid buttons.

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

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

Loading

Pass disabled and drop a dot matrix loader in as the icon for a loading state.

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

export default function ButtonLoadingDemo() {
  return (
    <Button variant="outline" disabled>
      <Diffusion />
      Generating
    </Button>
  );
}

Link

Pass an element to render to render the button as something else, like a link. Native button semantics are dropped automatically.

Introduction
import Link from "next/link";
import { Button } from "@/ui/button";
import { Icon } from "@/ui/icon";

export default function ButtonLinkDemo() {
  return (
    <Button color="neutral" render={<Link href="/ui/introduction" />}>
      Introduction
      <Icon name="ArrowUpRight" />
    </Button>
  );
}

API

PropTypeDefault
variant"solid" | "outline" | "plain""solid"
color"neutral" | "dark/white" | "accent" | "success" | "danger""dark/white"
size"sm" | "md" | "lg""md"
elevatedbooleanfalse

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