Standard UI Components

A button does something in place: submits, opens a dialog, changes state. A link goes somewhere: another page, screen or resource. Semantics must follow behaviour, because users and assistive technology rely on it to predict what will happen.

A modal dialog makes everything behind it unreachable for every user until it closes, so it fits a decision needed before continuing. A non-modal dialog lets the user keep working on the page, so it fits reference or parallel tasks.

A toast briefly confirms a low-stakes result of the user's own action; a banner states a condition affecting the whole screen or account and stays until resolved; an inline alert sits next to the content it concerns.

Choose by wait length and what is known: a skeleton when the arriving content's layout is known, a spinner for a short wait of unknown shape, and a progress bar when measurable work takes longer.

A checkbox is an independent yes/no, or one of many picks, applied on submit; a radio group picks exactly one of a few visible options; a switch turns a setting on or off and takes effect immediately.

Tabs switch between peer panels of different content within one page; a segmented control switches a mode or view of the same content; navigation links go to separate destinations with their own address and history.

The label names the value and stays visible; helper text gives purpose or format; the error message says what is wrong and how to fix it. Placeholder text vanishes on typing, is often too faint, and makes a poor name.

A tooltip is short supplementary text shown on hover or focus that never takes focus, so it holds no links, buttons or essential information. A popover opens on explicit activation, can take focus and may hold interactive content.

Capping at 99+ keeps the badge's width bounded over its icon, and beyond two digits the exact number rarely changes what a user does next. The design must still expose the exact count on the destination screen and in the text alternative.

A silently disabled button gives no feedback: users cannot tell what is missing, and it may be faint and skipped by focus. Prefer an enabled button that, when pressed, names what is missing and leads there, or a visible reason.

Make the title the card's one real link and extend its clickable area over the card, with the Save button layered above as a separate control. Never wrap the whole card, including the button, in one link or button.

A modal dialog should close with Escape and with a visible close or cancel control, and every dismissal means cancel. Backdrop-click closing is optional and should be off when the dialog holds unsaved input or demands an explicit decision.

Long enough to read comfortably, scaled to its length; the timer pauses while the toast is hovered or focused, and a toast with an action stays longer or until dismissed. Users should be able to keep toasts on screen.

An error summary lists every error at the top of the form, takes focus after a failed submit, and links each entry to its field, where a matching inline message sits beside the input.

Keep a native select for a short, plain-text, single choice: it brings the platform's picker, keyboard, screen-reader and zoom support for free. Build a custom listbox only when options need rich content, filtering or real multi-select, and budget its whole accessibility contract.

A visible control to stop and restart rotation, placed before the slides in focus order, plus rotation that stops when keyboard focus enters and while a pointer hovers — stopping only while hovered or focused is not a pause mechanism.

An error message in text, right beside the field, saying what is wrong and how to fix it, with an icon or other non-colour cue, tied to the field so it is read on focus, and the typed value kept.

It must be dismissible without moving pointer or focus, hoverable so the pointer can move onto it without it vanishing, and persistent until the trigger is left, it is dismissed, or its information is no longer valid.

Emphasis ranks actions so the eye finds the main one: usually one primary per view or region, secondary for alternatives, low emphasis for minor ones. Destructive is an intent on any rung, signalled by label and placement, not colour alone.

A card is a container holding optional media, a required title, supporting metadata, optional body text and optional actions, with one primary target. Use cards to browse varied, visual items; use list rows to scan and compare many similar items.

Mark whichever kind is the exception so the marker carries information, and use one convention across the whole system. Many systems write '(optional)' in the label when most fields are required, and no marker relies on colour alone.

A single column gives every user one unambiguous path, so fields are not skipped and reading order matches visual order. Two fields may share a row only when they form one short answer, such as card expiry month and year.

Making the label part of the target turns a tiny box into a whole row, which is faster and easier to hit, especially on touch screens. A link inside that label competes for the same tap, so move it beside or below the label.

A select holds a value that a form keeps and submits; an action menu runs a command and holds no value. Commands in a select can fire while arrowing and look like saved settings; a menu cannot show or require a value.

An avatar group shows up to a set maximum, then replaces the last slot with a same-size overflow indicator reading +N, where N is the number hidden. Activating it, or a nearby list, reveals everyone; all avatars share one size tier.

A loading state blocks repeat activation, keeps the button's size and position, keeps focus on it, and makes the busy state perceivable. Without it, signers press again, causing duplicate submissions, or assume nothing happened.

A list item has a leading slot, primary text, optional secondary text and a trailing slot for metadata, status or an action. Density changes spacing and row height — never the user's text size, targets below the minimum, contrast or the content itself.

Initial focus depends on content: usually the first focusable element, a static title for long or structured content, the least destructive action for irreversible steps. On close, focus returns to the trigger unless it is gone or the workflow continues elsewhere.

Each severity gets a text label or icon plus colour, never colour alone. Success and information are announced politely; only messages that need immediate attention are assertive, and no feedback message moves focus.