GitHub

Button

Triggers an action.

import { Button } from "@oikos/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. Submit buttons get a subtle press animation.

Sizes

import { Button } from "@oikos/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 "@oikos/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 "@oikos/ui/components/button";
import { Icon } from "@oikos/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 "@oikos/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.

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

export function Loading() {
  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 "@oikos/ui/components/button";
import { Icon } from "@oikos/ui/components/icon";
import { Route } from "next";

export function AsLink() {
  return (
    <Button color="neutral" render={<Link href={"/ui" as Route} />}>
      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"
isElevatedbooleanfalse

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