Components

Buttons

One primary button per view, placed last (end side). Labels are verbs: “Speichern”, not “OK”. Danger only for destructive actions — and those also need a confirm or an undo.

Form fields

Labels are always visible (never placeholder-only). Hints and errors are linked with aria-describedby. Inputs are 16 px so iOS doesn't zoom.

Error summary

After a failed submit: show the summary at the top, move focus to it, link each error to its field.

Checkbox, radio, switch, segmented, scale

Cards & stat tiles

Cards are flat (border, no shadow) and group one topic. Stat tiles show a number that leads to an action — not counters for their own sake.

Lists

One primary action per row (the row itself). Everything else goes into the overflow menu. At most one secondary line.

Tables

For comparing values across columns (desktop admin). With data-stack, rows become cards below 768 px — every cell needs data-label. Numbers right-aligned with tabular figures.

Badges, chips, avatars

A badge shows the status of a thing (one meaning only). A chip is something you press — a filter or a selectable tag.

Progress

Alerts, toasts, save status

Alerts are part of the page and stay. Toasts confirm what just happened and disappear; offer Rückgängig instead of asking for confirmation when the action is reversible.

Dialogs, bottom sheets, menus

Native <dialog> (focus trap, Esc, top layer) and the popover attribute. The confirm dialog names the consequence and uses the action verb as its button label.

Tabs, stepper, back link

The app shell (sidebar ≥ 1024 px, tab bar below) is shown on this page itself and in the example screens.

Empty & loading states

Empty states explain why it's empty and offer the next step. Skeletons for loads longer than ~300 ms; a spinner only inside buttons or small areas.

Club components

Belts always show colour and name. Stripes are labelled chips, never colour-only dots. Colours come from the club's grading system.