Primitives
Actions
Toggle
A single on-or-off control that shows its state on itself. If the state belongs to a form rather than to a toolbar, use Switch or Checkbox instead.
Command
Keyboard-first search across everything. Worth adding once a tool has more than about a dozen destinations; before that it is ceremony.
Forms
Input
Every input gets a label. Placeholder text is not a label. Errors sit next to the field and say what to do, not that something went wrong.
Use your company address so we can match you to your account.
Select
For a known, closed set of options. Past about fifteen entries a Command palette beats a select, because scanning a long list is worse than typing.
Input group
An input with something attached: an icon, a unit, a button. Keeps the affordance inside the field boundary instead of floating beside it.
Textarea
For prose the person will re-read before sending. If the answer is one line, an input is kinder because it signals the expected length.
Checkbox and radio
Checkbox for any number of choices, radio for exactly one. Both get a real label, and the label is clickable.
Switch and slider
Switch commits immediately, so it needs no save button. Slider is for values where the approximate position matters more than the exact number.
60 seats
One-time code
Fixed-length codes get their own field per character so people can see the length before typing. Paste still fills the whole thing.
Display
Badge
Status, not decoration. Never encode meaning in color alone. The word carries it and the color reinforces it.
Card
A card earns elevation when it marks a genuinely distinct region. If you're only grouping related content, space and a hairline rule do it better than another box.
Four weeks, one team, a report you can act on.
Table
Numbers are tabular so they align down the column, and numeric columns are right-aligned. A table wider than its container scrolls itself rather than the page.
| Team | Stage | Seats |
|---|---|---|
| Revenue Ops | Maintaining | 42 |
| Legal | Blocked | 12 |
Avatar
Initials are the fallback, not an afterthought: most internal tools have no photos. Size with classes, since Avatar takes no size prop.
Item
A row with media, content and actions. Reach for this before hand-building a flex row; it keeps alignment consistent across every list in the app.
Revenue Ops, owner since March
Legal, blocked on review policy
Progress
For determinate work only. If you cannot say how far along it is, a spinner is the honest control.
Separator and keyboard
A separator divides peers. If one side is subordinate to the other, indentation or space says it better. Kbd renders real key names, not styled text.
Aspect ratio and scroll area
Aspect ratio reserves space before media loads, so nothing jumps. Scroll area gives a long list its own boundary instead of scrolling the page.
Carousel
Only when the items are genuinely browsable and equal. A carousel hides everything after the first item, so never put anything load-bearing in slide two.
Overlays
Dialog
For a focused task that must finish before anything else. Never for a message, and never for a destructive confirmation, which is AlertDialog's job.
Sheet and drawer
Sheet slides from an edge and suits secondary detail beside the main view. Drawer comes from the bottom and is the better mobile pattern, because it is reachable with a thumb.
Popover, tooltip and hover card
Tooltip names a control in a few words and must never hold anything essential, since touch has no hover. Popover holds interactive content. Hover card previews a thing you could navigate to.
Feedback
Loading and empty
Loading keeps the layout still. A skeleton matches the shape of what's coming so nothing jumps. Empty states offer a next action rather than announcing that there is no data.
Alert
For something the person needs to know about the whole view. If it belongs to one field, put it under that field instead, where the fix is.
Toast
Confirmation of something the person just did, that they do not need to act on. Never put an error people must fix in a toast; it disappears, and so does the fix.
Calendar
For picking a date where the day of the week or the shape of the month matters. If people know the exact date, a text field is faster.