185 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
17Input
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.
Navigation
10Navbar
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.
Data display
12Table
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.
Feedback
10Tooltip
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.