Actions

Button

Starts an action. One primary button per view; start every label with a verb.

import { Button } from "@flinbu/seed";

Variants

Primary for the main action, secondary next to it, ghost and tertiary for quieter actions, destructive for what can't be undone.

import { Button } from "@flinbu/seed";
import { Trash2 } from "lucide-react";

<Button>Save changes</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="tertiary">Duplicate</Button>
<Button variant="ghost">Skip</Button>
<Button variant="destructive" leftIcon={<Trash2 />}>Delete token</Button>
<Button variant="success">Approve</Button>
<Button variant="link">Read the guide</Button>

Sizes

32, 40 and 48 px tall. Heights follow the theme's density.

import { Button } from "@flinbu/seed";

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With icons

import { Button } from "@flinbu/seed";
import { Plus, Search, ArrowRight } from "lucide-react";

<Button leftIcon={<Plus />}>New token</Button>
<Button variant="secondary" rightIcon={<ArrowRight />}>Continue</Button>
<Button variant="ghost" icon={<Search />} aria-label="Search" />

Loading and disabled

import { Button } from "@flinbu/seed";

<Button loading>Saving</Button>
<Button disabled>Disabled</Button>
<Button variant="secondary" disabled>Disabled</Button>

Use it for

Saving, creating, confirming: anything that changes something.
variant="link" for a quiet action inside text.

Use something else for

Navigation to another page: use a link (or Button with href).
Labels like OK or Submit: name the action.

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost' \| 'destructive' \| 'success' \| 'link'`	`'primary'`	Visual weight.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	sm 32px, md 40px, lg 48px.
`leftIcon`	`IconProp`	`none`	Icon before the label. An element like <Search /> (works in server components) or, in client components, the component itself.
`rightIcon`	`IconProp`	`none`	Icon after the label. An element like <Search /> (works in server components) or, in client components, the component itself.
`icon`	`IconProp`	`none`	Makes a square icon-only button. Needs aria-label. An element like <Search /> (works in server components) or, in client components, the component itself.
`loading`	`boolean`	`false`	Spinner in place of the left icon; disables the button.
`fullWidth`	`boolean`	`false`	Stretches to its container.
`href`	`string`	`none`	Renders an <a> with the same look.
`asChild`	`boolean`	`false`	Styles your own element, like a router Link.
`className`	`string`	`none`	Extra classes. They win over Seed's, so you can adjust one thing without forking.

Accessibility

A real <button> (or <a> with href) with a visible focus ring.
Icon-only buttons need aria-label.
loading sets aria-busy and disables the button so it can't be pressed twice.