UI Pattern Catalog

28 curated UI patterns — names, definitions, and specimens.

How to identify UI patterns in a screenshot

  • Segmented control — A row of equal buttons where exactly one wins at a time. Best for 2–5 flat views of the same thing — never for actions.
  • Tab bar — The app's whole map in one strip — three to five destinations, always visible, never scrolling away.
  • Breadcrumb — The trail of where you are: every ancestor is a link, the current page is plain text. If users never go deep, don't scatter crumbs.
  • Pagination — Numbered stops through a long list, with previous and next as bookends. Users trade endless scroll for a sense of place.
  • Hamburger menu — Three stacked lines hiding the whole navigation behind one tap. Saves space, costs discoverability — everything inside is out of sight.
  • Toggle switch — An instant on/off for a single setting. If the change doesn't take effect immediately, it should be a checkbox instead.
  • Search field — A pill-shaped prompt for queries. The little magnifier is one of the few icons everyone reads instantly.
  • Stepper — Two buttons joined at the hip for small, precise adjustments — quantities, copies, guests.
  • Checkbox — A small square that collects independent yes/no answers — any number can be ticked at once. The deferred cousin of the toggle: nothing happens until you submit.
  • Radio group — Round buttons where picking one releases the others — exactly one answer from a visible set. Named after mechanical car-radio presets.
  • Slider — A thumb dragged along a track to pick a value in a range. Great for rough, feel-based settings; terrible when the exact number matters.
  • Date picker — A pop-open calendar for choosing a day without typing it. The moment ranges or availability rules appear, this pattern earns its complexity.
  • Filter chips — Small rounded tokens that toggle facets of a list on and off. The active set doubles as a summary of what you're looking at.
  • Floating action button — One round button floating above everything, reserved for the screen's single most important action. Two FABs means zero priorities.
  • Button group — Related actions lined up shoulder to shoulder, sharing borders and importance. When one matters most, it gets the filled style — the rest stay quiet.
  • Bottom sheet — A card that slides up over the screen for a quick sub-task while keeping the parent visible.
  • Modal dialog — A window that dims the world and demands an answer before anything else can happen. Powerful and rude — spend it only on decisions that truly block.
  • Action sheet — A slide-up list of verbs answering one question: "what do you want to do with this?" Destructive options sit apart, dressed in red.
  • Tooltip — A tiny label that appears on hover or focus to name or explain the thing under the pointer. If the interface needs it to be understood, the interface is hiding too much.
  • Toast — A short confirmation that pops in, delivers one line, and leaves on its own. Never put anything in a toast the user must act on.
  • Progress bar — A track that fills to show how much of a job is done. Honest ones are tied to real work; the rest are just animated apologies.
  • Skeleton screen — Grey ghost shapes standing in for content while it loads, promising the layout before the data arrives. Feels faster than a spinner because it shows where things will land.
  • Empty state — What a screen says when there's nothing to show. The good ones explain why it's empty and hand you the one action that fills it.
  • Badge — A tiny count or dot pinned to an icon, whispering "something's waiting for you in here." Loses all power the day it's always on.
  • Card — A bounded container that makes one item — image, title, meta, action — feel like a single graspable thing. The workhorse of every feed and grid.
  • Carousel — A horizontal strip of items you swipe through, with a peek of the next one as the invitation. Position dots keep you honest about how deep it goes.
  • Accordion — Stacked headers that expand one section at a time, keeping long content scannable. The chevron is the promise; the collapse is the mercy.
  • Data table — Rows and columns for comparing many records across the same attributes. Sortable headers are the contract; alignment does the reading.