← Back to the lab

Name That Component

A free quiz for designers and developers: name ten UI components from a drawing, from tooltips to segmented controls, with a definition for each.

What it does

  • Ten drawings picked from 22 components: overlays, navigation, status and inputs
  • Four names each, two of them look-alikes, so you have to know the difference
  • Tap or press 1 to 4, 12 seconds a question, or relaxed mode with no clock
  • A one-sentence definition after every answer and a review of what you missed

FAQ

What is the difference between a tooltip and a popover?

A tooltip is a short text label that appears on hover or focus and holds nothing clickable. A popover is a floating panel that can hold interactive content, such as a menu or a small form.

What is the difference between tabs and a segmented control?

Tabs switch between views of different content in the same area. A segmented control is a compact group of options that changes a mode or a filter of the same content.

Why do component names matter in a design system?

A shared name is the shortest way to say what to build. When design, code and documentation use the same word, there is less rework and fewer duplicate components.

📖 UI component names: a glossary for designers and developers

More free tools

  • Palette Generator - Pick a hue, choose a color harmony, and get a full accessible palette with live AA/AAA contrast checking.
  • Contrast Checker - Paste two colors, see the WCAG ratio, and fix a failing pair with a single click.
  • Image → Palette - Drop in an image, pull out its dominant colors, and see which pairs are safe to use together.
  • Color Blindness Simulator - See a palette through protanopia, deuteranopia, tritanopia and achromatopsia - and catch colors that collapse.
  • Type Scale Generator - Pick a base size and a ratio, get a full type scale with live preview, fluid clamp() and tokens to copy.
  • Gradient & Mesh Generator - Linear, radial, conic or blobby mesh gradients - drag the points, shuffle the colors, copy the CSS.
  • Component States Explorer - Buttons, inputs and cards in every state - hover, focus, pressed, disabled, error - side by side with contrast checks.
  • Design Token Converter - Paste W3C tokens, Tokens Studio or Figma Variables JSON and get CSS, SCSS, Tailwind v4 or SwiftUI - aliases included.
  • Motion & Easing Playground - Drag cubic-bezier handles, tune a real spring, watch them race, and export motion tokens as CSS linear(), Framer Motion or SwiftUI.
  • Auto-Trim - Drop in PNGs and get them back without the empty transparent edges - in bulk, in your browser, as one ZIP.
  • Text Expansion Stress Test - See how a UI breaks in German, Spanish or pseudo-localized text - and which CSS fixes make it survive translation.
  • Mini A11y Audit - Paste HTML and find missing alt text and labels, unnamed buttons, heading jumps, tiny tap targets and low contrast.
  • Multi-size Preview - One message laid out across social and display-ad sizes, with platform safe zones and a draggable focal point. Export every PNG.
  • Mobile Preview - Open any website inside iPhone, Pixel, Galaxy and iPad frames at their real viewport sizes. Rotate it or compare four devices at once.
  • Hue Hunt - Match five colors by eye with hue, saturation and lightness. Scored by perceptual distance, with a daily challenge to share.
  • Pass or Fail - Twenty quick rounds: does this text pass WCAG AA contrast? Trust your eye, then see the real ratios.
  • Optical Eye - Fix seven layout flaws by eye: center a play icon, even out padding, size a circle against a square.
  • State Panic - Components fall with something happening to them. Pick the right UI state before they hit the floor.
  • Easing Golf - Mini golf with animation curves: shape a cubic-bezier so the puck hits every flag on time. Par is three.
  • Contrast Survival - The background keeps shifting. Hold the text lightness so it passes WCAG AA, then AAA, as long as you can.
  • Token Rush - Swap hard-coded values for the right design tokens, fast. Then flip the theme and see what breaks.
  • Kern Me - Space six words by eye. Each has one letter pair too tight or too loose; the answer is the font designer’s own kerning.
  • Tab Order - Tap a screen’s buttons, links and fields in the order the Tab key should visit them. Five screens, one WCAG rule.
  • Snap to Grid - Five components with spacing nudged off the scale. Snap every padding and gap back to its 4 and 8 px step before the clock runs out.
  • Weight Watcher - A sample hides its font weight, size or line height. Slide yours until the two match, six rounds, with the real value after each.
  • Radius Match - A rounded box inside a rounded box. Slide the inner radius until the gap is even. The rule: outer radius minus padding.
  • Ramp Repair - Nine shades of one color, light to dark, and one is broken. Spot it before your lives run out.
  • Fat Finger - Buttons, links and icons drawn at their real tap size. Flag the ones under the 24, 44 or 48 px minimum.