Button

Any action. Six variants, each with disabled, loading, success and error states. Pass selected (true or false) to make it a toggle.

Sourcecomponents/button.tsx

primary

secondary

outline

ghost

link

destructive

Feedback

Sizes (sm is dense, desktop only)

Icon-only

As a toggle

Usage

Button usage

import { useState } from "react";import { Button } from "@/components/button";
export function ButtonUsage({ save }: { save: () => Promise<void> }) {  const [saving, setSaving] = useState(false);  return (    <div className="flex gap-3">      <Button variant="outline">Cancel</Button>      <Button        loading={saving}        onClick={async () => {          setSaving(true);          await save().finally(() => setSaving(false));        }}      >        Save changes      </Button>    </div>  );}

When to use

Use when

Any action: submit, open, confirm, toggle (selected)

Don’t use when

Navigating to another page; use Link