Atoms

Single-element building blocks: buttons, form controls, badges, chips, and the language-tag label. Each renders the real component from src/components/atoms/.

Buttons

One primary action per screen region. Secondary actions sit next to primary; never alone. Destructive actions are reserved for genuinely irreversible operations.

Default sizing

DaisyUI's btn primitive — primary / outline / ghost variants.

.btn .btn-primary stock sizing — both registers

Large sizing (.btn-lg)

More generous padding for prominent CTAs. Landing hero search submit, citation copy button, other museum-grade primary actions.

.btn .btn-primary .btn-lg generous padding, larger type

Destructive actions

For genuinely irreversible operations only. Always opens a confirm modal. --error accent, muted not shouting. Never icon-only.

.btn .btn-error use sparingly

Icon-only buttons

For common, recognisable affordances. Mandatory aria-label and tooltip on hover/focus.

.btn.btn-square.btn-ghost mandatory aria-label + tooltip on hover

Form controls

Labels above inputs (visible, never placeholder-as-label). Lazy-on-first-blur validation. Error messages persist on the page until resolved.

Text inputs

form-field label above, never placeholder-as-label
We send password-reset emails here.
required + helper text
Cataloged ID must follow the format XXXX-YYYY-NNNN.
.error + aria-invalid + role="alert"

Checkboxes & radios

Used in the filter sidebar. Native HTML controls with accent-primary; tab order matches visual order.

Region
<fieldset> + <legend> native semantics

Status badges

Variant prop: info, success, warning, error. Plain (no variant) for neutral counts and labels.

flagged info published review withdrawn 3 parts
<Badge variant="...">

Filter chips (removable)

Active filter representation on search-result pages. Each chip has a remove button with a clear aria-label.

Region: Jura Period: Lower Devonian Type: Fossil
<Chip label="..." removeLabel="...">

Language-tagged label

Vocabulary fallback. Visible (lang) tag for sighted users; HTML lang attribute for assistive tech.

Lower Devonian(en) Helvetische Alpenformation(de) Stylonema corallinum(la)
<LanguageTaggedLabel lang="..."> HTML lang + visible tag