1. Buttons & Actions

Interactive triggers and commands for users to take action.

• Standard buttons: Default, Secondary, Outline, Ghost, Link, Destructive, Disabled. Default is the filled primary. Secondary is a neutral fill. Outline carries the same weight as default but lighter visually. Ghost has no background until hover. Link reads as inline text. Destructive uses the semantic danger color.
• Icon and floating action buttons: Icon-only buttons for compact toolbars, "with icon" variants that pair an icon with a label, and a circular floating action button for primary actions on mobile.
• Button groups and toggles: Segmented controls for mutually exclusive selections (Left, Middle, Right) and view-mode toggles (Map, List, Grid). The italic toggle is the single-button variant.

Loading buttons keep their width to prevent layout shift. Disabled buttons get aria-disabled rather than the disabled attribute when they need to remain focusable for screen reader discovery.

2. Inputs & Forms

Data entry, selection controls, and form patterns.

• Text inputs: Standard, Password (with reveal toggle), Search (with leading icon), Number (with stepper), Text area.
• Selection controls: Checkboxes, Radio groups, Switches/Toggles. Switches are for immediate-effect state changes. Checkboxes are for multi-select that requires a submit. Radio groups are for mutually exclusive selections inside a form.
• Advanced inputs: Select/Dropdown, Combobox/Autocomplete, Slider/Range slider, Date picker, OTP/Pin input, File uploader (drag and drop), Color picker, Tags/Chips/Pill inputs, Rich text editor.

Rule for select vs. combobox: short fixed list, use select. Anything over seven items or anything filterable, use combobox. I never rely on color alone to communicate error state. Errors get an icon, a message, and a border color change together.

3. Navigation

Wayfinding components. Top bars, side navigation, breadcrumbs, tabs (horizontal and vertical), pagination, menu primitives, and the command palette.

Two rules I do not break: the active state is unambiguous, and every navigation element is keyboard-reachable in a sensible tab order.

4. Data Display

Cards, lists, data tables, avatars, badges, tags, dividers, tooltips.

Cards have four variants: default, interactive (whole card is clickable), bordered, elevated. When a card is interactive, the entire surface is the hit target. I do not nest interactive elements inside interactive cards. Data tables use the radius-none token. Tables read better with sharp corners.

5. Feedback & Overlays

Modals, toasts, alerts, and state indicators.

• Overlays and dialogs: Modal (Open Modal), Destructive confirmation (Delete Item), Drawer/Sheet (Open Drawer/Sheet). All trap focus, close on escape, and return focus to the trigger element on close.
• Contextual feedback: Inline info icons, mentions (@user pattern), Popovers, Toasts/Snackbars. Toasts auto-dismiss after 5 seconds for success, 8 seconds for warnings. Errors do not auto-dismiss.
• Alerts and status: Info banners ("Heads up!") and error banners. Banners persist until dismissed or resolved. I use them for system status, account-level alerts, and anything the user needs to act on.
• Loading and progress: Progress bars for tasks over 3 seconds. Skeletons for content the user is waiting to read. Spinners for actions the user just took.

6. Charts & Metrics

KPI/stat tiles, bar charts, line charts, area charts, donut charts.

Stat tiles follow a strict three-element structure: label, value, delta-versus-prior-period. The delta uses semantic color (green for positive, red for negative) and includes the comparison window in the helper text. Charts use a sequential token palette by default. For diverging or categorical data, I use the dedicated chart color tokens, not the brand palette. Brand colors are for action and emphasis, not data.

7. Complex Patterns

Commonly used combinations of components.

• Authentication forms: Login and signup composed from input, button, and link primitives. I keep them in a single column, with the submit button as the last tab stop and "Forgot password?" as a link above it.
• Payment method: Card / PayPal / Apple selector built from segmented buttons, with conditional form rendering below based on the selection.
• Chat and comments: Threaded message view with avatar, message bubble, timestamp, read receipt, and composer. The composer follows the AI prompt input rules: submit on enter, newline on shift-enter.

8. Templates

Full-page and structural layouts built from system primitives.

• Dashboard: Standard sidebar + header layout with content area.
• Landing Page: Hero section, feature grids, and call-to-action blocks.
• Settings: Two-column layout with vertical navigation and form sections.