II · Components / 08

Actions

Every part the site is built from, live, in both themes.

Actions#

Buttons do, links go. One primary action per view; anything that can be undone is undone, not confirmed.

Buttons<Button variant="primary" loading />

Use
Primary for the one thing the view is for; secondary beside it; ghost for quiet or repeated actions. Save shows its own progress, then a toast.

Avoid
Two primaries side by side, or a button that only navigates (that is a link).

Links

Loot is AtlasLootClassic’s record until Forever records its own.

Open the dungeon journal Source build on Wago Tools Why this matters

Use
Inline links underline; standalone links carry an arrow; links that leave the site say so.

Icon buttons and groups

Use
Icon-only buttons always carry a label, shown as a tooltip on hover and focus.

Copy and IDs<CopyButton /> <IdChip />

Use
Anything people paste elsewhere (links, imports, IDs) copies in one click and confirms in place.

Undo, and when to ask

Lionheart Helm
Lightforge Breastplate
Magister's Crown

Use
Removing a thing from a plan: do it, and offer Undo. Destroying something that cannot come back: ask, in a dialog that names what goes.

Avoid
“Are you sure?” for anything reversible.

Implementation contract

Use it in the product

Make a task explicit, show progress in place, and reserve links for navigation.

Exports: Button, ButtonLink, CopyButton, IdChip
Source: src/components/waypoint/ui/primitives.tsx; src/components/waypoint/ui/interactive.tsx
Props and defaults: Button extends native button attributes. variant defaults to secondary; size accepts sm, md or lg; shape accepts icon; loading defaults to false; loadingLabel defaults to Working…. ButtonLink requires href. CopyButton requires text and label.
HTML and keyboard: Button renders a native button (type=button by default); ButtonLink renders a Next link. Give icon-only actions an accessible name. CopyButton confirms the copied state where it happened.
States and themes: Default, hover, focus, pressed, disabled, loading, error and done. Loading keeps the control focusable and suppresses repeat activation. A primary action deepens on hover; it never grows an underline, which is a link's. The teal fill is for the one next action: a selected filter, tab or layer takes the selected wash and the selection line instead.
Data and provenance: Copy only the actual link or ID. A successful click is not proof of persistence; save state belongs next to the plan title. The current gear catalog is build 1.60.1.70245.

Example usage

import { Button } from "@/components/waypoint/ui/primitives";

export function SavePlan({ onSave }: { onSave: () => void }) {
  return <Button variant="primary" onClick={onSave}>Save the plan</Button>;
}

Where to?

Actions

Actions#

Delete this character?

Use it in the product