258 terms · 6 categories
Glossary
Every term comes with a plain-English definition, a wireframe, and a prompt you can copy straight into your AI.
Look-alike terms
23 sets of look-alike terms that are easy to mix up, side by side.
UI components
The controls on a page, from buttons and inputs to dialogs and filter bars.
Hover a thumbnail to see what each part is called
Fundamentals
06Button
Icon Button
Link
Clickable text that takes you to another page, a spot on the same page, or an external URL. Usually colored or underlined.Divider
A thin horizontal or vertical line that separates two neighboring blocks of content, sometimes with a bit of small text in the middle.Floating Action Button
A round button pinned to the bottom-right corner of the screen that stays put while the page scrolls, holding the most-used action on the current page.Image
Shows a picture on the page. You usually need to handle the aspect ratio, a loading placeholder, load failures, and click-to-zoom preview.
Form input
23Input
A box for typing one short line of text, like a name, phone number, email, or title. The most common control in forms.Textarea
An input for multiple lines of text where Enter adds a new line. Good for longer content like notes, comments, and problem descriptions.Input Number
An input that only accepts numbers, with plus and minus buttons. It can limit the minimum, maximum, and step size.Select
Click to open a list of options and pick one or more. When closed it only takes up the space of an input, so it suits longer option lists.Checkbox
A small box you can check and uncheck, for picking several options from a group or confirming a single item like "I agree to the terms."Radio
A group of round options where only one can be selected, and picking a new one deselects the old one. Good for 2 to 5 mutually exclusive options.Switch
A small sliding control, like a light switch, that turns a feature on or off. It usually takes effect as soon as you flip it.Slider
Drag a round handle along a horizontal track to pick a value or a range. Good for adjustments that don't need precision, like volume, brightness, or a price range.Date Picker
Click an input and a small calendar pops up so users can pick a date or date range, instead of typing dates in inconsistent formats.Upload
A control for choosing files or images from a computer or phone and sending them to the server, by clicking a button or dragging files in.Form
Groups input controls, field labels, validation messages, and a submit button together to collect and submit the information users fill in.Search Box
An input with a magnifying glass icon. Type keywords and press Enter or click the search button to find content on the page, in a list, or across the site.Transfer
Two lists side by side with arrow buttons in between. You move items from the "available" side to the "selected" side to pick a batch.Cascader
A dropdown that opens into columns you pick from left to right by level, like choosing a state, then a county, then a city.Rate
A row of five stars (or other icons) where the number lit up is the score. Users can give a rating with it, or it can just show an average score.Segmented Control
A few option buttons packed into one strip, where only one can be selected at a time. Used to switch quickly between a few views or modes.Filter Bar
A row of query conditions above a list or table, like keyword, status, or date range, used to narrow down the data you see.Time Picker
An input for picking a specific time of day (hours and minutes). Click it and you scroll through hour and minute columns, or pick from a list of times at fixed intervals.Color Picker
A control for choosing a color. Normally it's a small swatch showing the current color. Click it to pick from a color area and hue slider, type a color value, or tap a preset.OTP Input
A row of small boxes for a text or email verification code, one digit per box. Typing a digit jumps to the next box. Common in sign-in, sign-up, and extra checks before sensitive actions.Rich Text Editor
An editing area like a lightweight Word. A row of tool buttons on top lets you bold text, set headings, and add lists, links, and images. What you see is what you get, and it saves formatted content.Tag Input
An input that takes several short words. Type a word and press Enter, and it becomes a small tag inside the box. Keep typing the next one, and click the ✕ on a tag to remove it.Chat Input
The input area at the bottom of a chat or AI conversation. A text box that grows with its content, plus buttons for attachments and sending (Send turns into Stop while generating). Enter sends, Shift+Enter adds a new line.
Navigation
12Navbar
Sidebar Menu
Breadcrumb
Tabs
A row of clickable labels where clicking one shows its content panel below. Used to switch between a few peer blocks of content in the same spot.Pagination
Splits a large set of data into pages, with page numbers and Previous and Next buttons for moving between them.Steps
A row of numbered nodes connected by lines that shows every step of a multi-step process and which step the user is on.Dropdown Menu
Footer
Anchor
A small table of contents listing the section titles on the current page. Click one to jump there; while scrolling, the current section is highlighted automatically.Command Palette
A search box that pops up with a keyboard shortcut (usually Ctrl+K or ⌘K). Type a keyword to jump to a page or run an action.Bottom Tab Bar
A row of 3–5 icons with labels fixed to the bottom of mobile apps and mobile web pages, used to switch between the most important pages.Menubar
Data display
13Table
Lays out many records with the same structure in rows and columns, one record per row and one field per column, so they're easy to compare, sort, and filter.List
Stacks items vertically one after another, each usually a title plus a line or two of description. Good for browsing one by one and clicking into details.Card
A self-contained rectangle with a border or shadow that groups a related image, title, description, and actions into one unit.Avatar
A small round or rounded-square image that represents a person or account. Without an image, it shows the person's initials or a default icon.Badge
A small red dot or number on the top-right corner of an icon, avatar, or button that tells users there are unread messages or new content.Tag
A small rounded marker next to text that uses a word or two to show a category, status, or attribute, like "Shipped" or "Frontend."Carousel
Shows several images or cards in turn in the same area. It can switch automatically, or users can swipe or click dots to switch.Tree
An indented list you can expand level by level, used to show data with parent-child relationships, like org charts, folders, or categories.Statistic
A key metric shown as a big number, with the metric name above it, often with a unit, an up or down arrow, and a comparison.Chart
Turns numbers into lines, bars, slices, and other shapes to show trends, comparisons, and proportions, so the data makes sense at a glance.Code Block
An area that shows code in a monospace font with syntax highlighting, usually with a language label, line numbers, and a one-click copy button.Calendar
A grid of dates by month or week that shows each day's schedule, events, or data right inside the cells.Map
A draggable, zoomable map embedded in a page, with markers for stores, addresses, or delivery locations. Clicking a marker opens its details.
Feedback
11Tooltip
A short piece of dark explanatory text that pops up next to an element on mouse hover or keyboard focus and disappears when you move away.Popover
A small card that pops up next to an element when you click or hover it. It can hold a title, a few lines of text, or even buttons.Modal
A window that pops up in the middle of the page with a backdrop behind it. The user has to deal with it or close it before they can use the page again.Drawer
A panel that slides in from the edge of the screen, so you can view details or fill in a form without leaving the current page.Toast
A short one-line message that appears briefly at the top or bottom of the screen after an action, then disappears after a few seconds without interrupting the user.Alert
A colored bar that stays in the page or a section, explaining the current status, a risk, or something to watch out for.Notification
A message card that pops in from a corner of the screen (usually the top right), with a title and body text, to announce new messages or background task results.Progress
A bar or ring that gradually fills up to show how much of a task is done, so users know how long they still have to wait.Spinner
A small icon that keeps spinning to show something is processing or loading, without saying how long it will take.Skeleton
Before the data finishes loading, gray blocks sketch the rough outline of the page content, then get replaced by the real content once it arrives.Result Page
A full-page response after an action like paying, submitting, or signing up. A big icon, a one-line result title, a line of explanation, and "next step" buttons tell users whether it worked and what to do next.
Layout containers
03Collapse
A set of panels whose titles you click to expand or collapse the content, used to split long content into sections people open as needed.Toolbar
A compact row of buttons and icons placed above a block of content, grouping the common actions for that content in one place.Section
Splits a long page into chunks. Each chunk has its own heading and a group of content, and chunks are separated by white space, dividers, or a change in background color.
Marketing
09Hero Section
The big area at the top of a landing page or company site. A large headline, one line of explanation, and a main button tell people what the product is at first glance.Feature Grid
The section on a marketing site that introduces what the product does. A set of icons, short titles, and one or two lines of text laid out in two or three neat columns, so visitors can scan the main selling points fast.CTA Section
A standout block at the end (or middle) of a marketing page with one headline and one main button. It gives visitors a final push to sign up, start a trial, or contact sales after they've read the pitch.Pricing Table
The section on a marketing site that lists a few plans side by side. Each one shows the price, who it's for, what's included, and a buy button, and the recommended plan is usually highlighted.FAQ Section
A section that collects the questions visitors ask most, with their answers. On marketing sites it's usually a list of questions you can click to expand, placed after the pricing table and before the footer.Testimonial
A section on a marketing site that shows real customers' own words. Each one is a quote plus the speaker's photo, name, job title, and company, using word of mouth to win over new visitors.Logo Wall
One or a few rows of customer or partner logos on a marketing site, usually in gray, with a line like "Teams using us." It quickly shows who uses the product.Stats Band
A full-width strip on a marketing site with three or four big numbers side by side, each with a line of explanation (like "active stores"). It uses specific, sourced numbers to show the product's scale or results.How It Works
A section on a marketing site that explains "how to get started" in 3–4 numbered steps, each with a number, a short title, and one sentence, so visitors know what they'll need to do.
Page header
01Text
04Heading
The title text (h1–h6) above a page or a block of content. It's bigger and bolder than body text, says what the block below is about, and together they form the page's outline.Paragraph
A complete block of explanatory text, written with a p tag and placed under a heading to spell out the details. Whether it's easy to read comes down to line length, line height, and font size.Inline Code
A short piece of code inside a sentence, like the function useState, the command npm install, or the file .env, set apart from body text with a monospace font and a light gray background.Blockquote
A passage in an article quoted from someone else or another source. It has a vertical bar on the left, is indented, uses a slightly lighter text color, and ends with the source.
Forms
01Actions
02Layout
01Overlays
02Accounts
01Messages
02Notification Center
The one place to see all in-app notifications. Click the bell to open a list of comments, mentions, and system messages in time order. Unread ones have a dot, and you can mark all as read in one click.Chat Bubble
One message in a chat or AI conversation. It's a rounded box with a background color. Your messages sit on the right, the other person's or the AI's on the left, with an avatar and a time nearby.
UX polish
01Images
02Image Preview
The full-screen view that opens when you click a thumbnail. It shows the original image on a dark background, lets you zoom, rotate, and flip through the rest of the set, and closes with Esc or the ✕.QR Code
A black-and-white square pattern that a phone can scan to open a link, log in, pay, or add a contact. Put a line next to it saying which app to scan with and what scanning does.