Visual UI Glossary

The most prominent button, filled with a solid color, reserved for the single most important action — like “Start” or “Subscribe”. Best kept to one per area so it stays clear.

A button less prominent than the primary, usually outlined with no fill, for an alternative or secondary action shown beside the primary — like “Learn more”.

A button with no background or border — just clickable text — for the lowest-priority actions like cancel or skip, so it doesn’t compete with the bolder buttons.

A small button carrying only an icon and no text, saving space for frequent actions — like like, share, or delete.

A prominent round button that floats above the content in a corner, reserved for the page’s primary action — like “Add” or “New chat”.

A group of joined buttons in one frame where you pick one option that highlights instantly — like switching between “Monthly” and “Yearly”.

A number field with + and − buttons to increase or decrease the value step by step — like setting item quantity in a cart.

A box where you type a short piece of text like a name or email. Usually has a label above it, and its border changes when focused so you know it’s active.

A large multi-line input for longer text — like a message or comment — often with a corner handle to resize it.

Faint gray text inside an input field that hints what to type (“Enter your email”) and disappears as soon as you start typing.

A field showing one option that, when clicked, drops down a list of choices to pick from. Saves space instead of showing all options at once.

A small box you tick to agree or select an item. Unlike radio buttons, you can check more than one in the same list.

Small circles where you pick exactly one option; choosing one clears the previous — like selecting a payment method.

A small switch that slides between two states: on and off. Used for options that are either enabled or not — like turning on notifications or dark mode.

A handle you drag along a track to pick a value within a range — like setting a price or volume.

A field with a magnifier icon where you type a word to search the site or list, often suggesting results as you type.

A field that opens a small calendar when clicked, letting you pick a day instead of typing the date — avoiding format mistakes.

A dashed-border area where you drag a file in or click to pick one from your device to upload — like an image or a résumé.

The bar across the top of a site holding the logo, links to the main sections, and a sign-in button — staying up top for quick navigation between pages.

A three-horizontal-line icon, usually at the top on mobile. Tapping it opens the hidden navigation menu to save space.

A small trail of links near the top showing where you are in the site (Home → Programs → Program name) and letting you jump back to any level with one click.

A row of clickable headings that splits content into sections, showing one section at a time — like “Overview” and “Reviews” tabs on a product page.

A numbered row that splits a long process (like signup or checkout) into steps, highlighting your current step and what you’ve completed so you know how far is left.

A row of numbers and arrows below a long list (results, products) that splits it into pages instead of showing them all at once, so you click between them.

A small window that appears over the page and dims everything behind it, focusing you on one action — like confirming a delete or logging in — and blocks the page until you close it.

A panel that slides in from the side to show navigation or filters, covering part of the page until you close it.

A small card that appears next to a button on click to show extra content or options, closing when you click outside — bigger and more interactive than a tooltip.

A small list of actions that appears from a “⋯” button or a right-click, showing options for a specific item — like edit, delete, or share.

A small bubble with a short hint that appears when you hover over an element or icon, explaining its function without cluttering the interface.

A bordered box with a light shadow that groups related content (image, title, text, button) into one unit set apart from its surroundings — like a product or article card.

Rows and columns showing organized data (like a list of orders or users) so it’s easy to scan and compare, usually with a header row naming the columns.

A strip that shows images or cards one at a time, moving between them with arrows or the dots beneath it — like a product image gallery.

A small round image representing the user — their photo or the first letter of their name — shown next to their name or at the top of the dashboard.

A small colored label carrying a word or number to highlight a status or count — like “New”, or the notification number above the bell icon.

A small pill representing a choice, label, or filter, often with an ✕ to remove it — like interest tags or applied filters.

A list of headings where each expands on click to reveal its content, then collapses. Ideal for FAQs — the page stays tidy and shows the answer on demand.

A row of stars you click to give a 1-to-5 rating, or that displays a product’s average score.

A thin line separating content sections to rest the eye and show where one section ends and another begins, sometimes with a word in the middle like “or”.

A friendly message with an icon shown where an empty list would be (no results, no orders yet), explaining why and suggesting a next step instead of leaving the screen blank and confusing.

A small message that pops up briefly in a corner to confirm something happened (“Saved”) then disappears on its own without interrupting you.

A wide colored bar at the top of the content with an important message or warning, staying until you read or dismiss it — unlike a toast that vanishes on its own.

A bar that fills up gradually to show how far along a task is — like a file upload or your course-completion percentage.

A small circle that keeps spinning to tell you the system is working and waiting for a short task to finish — like loading or saving.

Faint gray shapes that mimic where content will appear before it loads, reassuring the user the page is loading rather than looking empty or stuck.

Softening the corners of elements (buttons, cards, images) instead of leaving them sharp, making the interface feel gentler and friendlier. Measured by radius, from slight to fully circular.

A soft shadow under an element that suggests it’s raised above the page, making it feel closer and more prominent. The larger the shadow, the higher it appears — like cards and popovers.