01A · BUTTONSACTION CONTROL
Buttons do things. Use a link when the destination changes; use a button when something happens here.
INTERACTIVE FIELD GUIDE 01 / THE INTERFACE
A visual encyclopedia · a hands-on playground
Learn the language
of the web.
Explore the pieces that make up a modern interface. See what each pattern is called, try how it behaves, and peek at the structure underneath.
Explore the elementsEXPLORE THE LAYERS SELECT A LAYER
00HOW TO USE THIS PAGE
Look closer.
Then click around.
Every interface element has a job. Some organize information. Some invite an action. Others tell you what just happened. Start with the visual, try the behavior, then inspect the idea behind it.
LIVE DEMO FIELD NOTE DOM / CODE
01CONTROLS · ACTION & CHOICE
Give the interface a job.
Controls let people do something: commit an action, change a setting, or choose a value.
01B · CHIPSLABEL / FILTER
Tap a chip to remove it. This one is interactive.
Chips are compact tokens. They can label, filter, select, or be removed.
01C · SWITCHON / OFF SETTING
Quiet hoursMute non-urgent updates
Enabled
aria-checked="true"A switch changes a setting. Its label describes what turns on—not “yes” or “no.”
02FORMS · INPUT & RESPONSE
Ask for just enough.
A good form makes the next step clear, labels every field, and helps people recover from mistakes.
02A · TEXT FIELD + VALIDATIONLOCAL-ONLY FORM
Label + control + help + feedback. The browser keeps your value; this page makes no network request.
03OVERLAYS · CONTEXT & FOCUS
Bring something forward.
Overlays sit above page content. Their size, focus behavior, and interruption level should match the task.
03A · MODAL DIALOGFOCUSED TASK
Modal means the page is blocked. Escape closes; focus returns to the trigger.
03B · POPOVERANCHORED DETAIL
Popover is anchored, not blocking. Don’t make a tooltip carry a whole interaction.
05FEEDBACK · STATE & STATUS
Tell people what happened.
Feedback closes the loop. A tiny acknowledgment can prevent uncertainty; a persistent problem needs more than a fleeting toast.
05A · TOAST / SNACKBARTRANSIENT FEEDBACK
✓
Saved just nowYour changes are up to date.
Toast: brief and non-blocking. Don’t put essential instructions in a message that disappears.
Success Warning Error LoadingStatus needs words—not color alone.
06STRUCTURE · LAYOUT & DOM
Under the surface, a tree.
The DOM is the browser’s live document structure. CSS arranges it; semantics give it meaning; JavaScript gives it behavior.
06A · RESPONSIVE CONTAINERRESIZE THE FRAME
DRAG TO RESIZE
MAX-WIDTH CONTAINERContent gets room to breathe.
A wrapper constrains line length on wide screens, then gives way as the viewport narrows.
A container is not automatically a card. Sometimes it just sets a readable boundary.
06B · SEMANTIC DOMSTRUCTURE ≠ APPEARANCE
document
<body>
<header>brand + navigation
<main>
<section>heading + content
<form>label + input + button
<footer>related links
HTML
A page has a shape.
Use elements for meaning, not just appearance. A <button> behaves like a button; a <div> is just a generic box until you add semantics and behavior.
Show a small markup example
<main>
<section aria-labelledby="title">
<h1 id="title">A meaningful heading</h1>
<button type="button">Explore</button>
</section>
</main>DOM means Document Object Model. It is the live tree—not the same thing as your React component tree.
07FIELD NOTES · PICK THE RIGHT PATTERN
Close cousins.
Different jobs.
Pattern names matter because they set expectations. When in doubt, describe what the thing does.
NEEDFocused decision→ Modal dialog
NEEDQuick anchored detail→ Popover
NEEDBrief confirmation→ Toast / snackbar
NEEDImportant page notice→ Banner / alert
NEEDSwitch sibling panels→ Tabs
NEEDNavigate to another route→ Link
A “popup” could mean several things. Name the behavior: dialog, menu, popover, toast, or browser window.