Elements
What the pattern is called, what it is good at, and where it quietly makes things worse. Every page answers the question that usually gets skipped: when should you not use this?
Navigation
Command Palette
Type what you want instead of looking for where it lives.
NavigationTabs
Several panels sharing one space, one at a time.
NavigationPagination
Numbered pages, so a result can be found twice.
NavigationBreadcrumb
Where this page sits — not how you got here.
NavigationStepper
How far through this process you are — and how much is left.
NavigationTree View
Containment, made navigable — and the most expensive keyboard contract in UI.
NavigationSidebar & Rail
Navigation that stays, and still has to answer “where am I”.
NavigationMega Menu
A whole sitemap in a panel — and it is not a menu.
NavigationSticky Header
Rent paid in vertical space, on every screen, forever.
NavigationTab Bar
Named after tabs, and it is navigation.
NavigationInput & forms
Combobox
A select you can type into when the list is too long to scroll.
Input & formsSegmented Control
A row of joined buttons where exactly one stays pressed.
Input & formsSelect
Pick one from a short, known list.
Input & formsToggle Switch
Flip it and it is already done.
Input & formsCheckbox
A value the form collects — and the only one with a third state.
Input & formsRadio Group
One answer, guaranteed by the markup.
Input & formsMulti-select Input
Chips that are a form value, and every one of them removable.
Input & formsDate Picker
The calendar is the second way in, never the only one.
Input & formsRange Slider
Good for feeling a range, bad for stating a number.
Input & formsOTP Input
Six boxes, one value — and paste has to fill all of them.
Input & formsFile Dropzone
Dragging is the shortcut. The button is the control.
Input & formsFeedback & status
Toast
A short message that appears, says its piece, and leaves.
Feedback & statusAlert Banner
A message that stays put until the situation changes.
Feedback & statusEmpty State
The screen that decides whether someone stays or leaves.
Feedback & statusSkeleton
A gray placeholder shaped like the content that is loading.
Feedback & statusSpinner
A rotating indicator that says work is happening, without saying how much.
Feedback & statusProgress Bar
Only draw the bar if you know how full it is.
Feedback & statusInline Validation
Right message, wrong moment, and it reads as nagging.
Feedback & statusData display
Data Table
Rows and columns, for when the point is comparing them.
Data displayAvatar
A face for an account — and a plan for when there isn't one.
Data displayBadge
A small label carrying status — never colour alone.
Data displayStat Tile
One number, and everything needed to read it.
Data displayTag
A word about the thing — decide whether it does anything.
Data displayTimeline
An ordered list where the order is the meaning.
Data displayOverlays
Modal Dialog
A layer that takes over until you deal with it.
OverlaysDrawer
A panel that slides in from an edge and leaves the page in view.
OverlaysPopover
A small panel you open on purpose and can actually use.
OverlaysTooltip
A label for something that could not fit its own name.
OverlaysDropdown Menu
A list of actions behind a button you can see.
OverlaysContext Menu
Right-click actions — and never the only way to reach them.
OverlaysConfirmation Dialog
Most of them should have been an undo.
OverlaysHover Card
A preview for people with a pointer — and nobody else.
OverlaysLayout
Infinite Scroll
More content arrives as you reach the bottom — and the bottom never comes.
LayoutAccordion
A stack of sections where opening one can close the last.
LayoutDisclosure
One section that opens. Usually all you needed.
LayoutCard
A container that groups one thing — and the hardest link in UI.
LayoutCarousel
Everything past the first slide is content you hid.
LayoutBento Grid
Everything visible at once, ranked by how much room it gets.
LayoutSplit View
Two panes of equal standing, and a divider that has to be operable.
LayoutMaster-Detail
The selection is a location, so it belongs in the URL.
LayoutHead to head
- Combobox vs Command Palette
- Segmented Control vs Tabs
- Tab Bar vs Tabs
- Combobox vs Select
- Drawer vs Modal Dialog
- Popover vs Tooltip
- Alert Banner vs Toast
- Empty State vs Skeleton
- Skeleton vs Spinner
- Progress Bar vs Spinner
- Infinite Scroll vs Pagination
- Accordion vs Disclosure
- Breadcrumb vs Stepper
- Context Menu vs Dropdown Menu
- Checkbox vs Toggle Switch
- Checkbox vs Radio Group
- Multi-select Input vs Tag
- Bento Grid vs Carousel
- Mega Menu vs Sidebar & Rail
- Hover Card vs Tooltip
- Master-Detail vs Split View