UI element names

A visual glossary of 94 UI components: the proper name of each element, the other names people use for it, a definition and a specimen.

Guides

All patterns

Segmented control — A row of equal buttons where exactly one wins at a time. Best for 2–5 flat views of the same thing — never for actions.
Tab bar — The app's whole map in one strip — three to five destinations, always visible, never scrolling away.
Breadcrumb — The trail of where you are: every ancestor is a link, the current page is plain text. If users never go deep, don't scatter crumbs.
Pagination — Numbered stops through a long list, with previous and next as bookends. Users trade endless scroll for a sense of place.
Hamburger menu — Three stacked lines hiding the whole navigation behind one tap. Saves space, costs discoverability — everything inside is out of sight.
Tabs — A row of labels across the top of a section, each opening its own panel in the same spot. Peers only — if one tab makes no sense without another, they belong on one page.
Wizard — A long task split into a fixed sequence of short steps, one screen each, with a step indicator on top showing where you are (1 Details, 2 Payment, 3 Review) and Back and Next at the bottom. Setup, checkout and sign-up flows use it; the row of numbered steps on its own is called a stepper.
Pagination dots — The row of small dots under a carousel, a set of onboarding screens or the pages of a home screen: one dot per page, with the current one filled or stretched. They show how many pages there are and which one you are on; in iOS you can also tap beside the current dot or drag along the row to move. Apple calls the control a page control.
Toggle switch — An instant on/off for a single setting. If the change doesn't take effect immediately, it should be a checkbox instead.
Search field — A pill-shaped prompt for queries. The little magnifier is one of the few icons everyone reads instantly.
Stepper — Two buttons joined at the hip for small, precise adjustments — quantities, copies, guests.
Checkbox — A small square that collects independent yes/no answers — any number can be ticked at once. The deferred cousin of the toggle: nothing happens until you submit.
Radio group — Round buttons where picking one releases the others — exactly one answer from a visible set. Named after mechanical car-radio presets.
Slider — A thumb dragged along a track to pick a value in a range. Great for rough, feel-based settings; terrible when the exact number matters.
Date picker — A pop-open calendar for choosing a day without typing it. The moment ranges or availability rules appear, this pattern earns its complexity.
Filter chips — Small rounded tokens that toggle facets of a list on and off. The active set doubles as a summary of what you're looking at.
Dropdown menu — A closed box that shows one choice and opens a list of the rest. Saves room when there are many options; hides them for no reason when there are only a few.
Text field — A box you type into, with a label that says what goes in it. The label stays visible — placeholder text that vanishes on the first keystroke is not a label.
OTP input — The row of small boxes — usually four or six — for the one-time code a site texts or emails you, or an authenticator app shows: one digit per box, with the cursor jumping to the next box as you type. It works best as one real field with the boxes only drawn on, so the phone can offer the code from the message and pasting fills every box at once.
File upload — The part of a form for adding files: a box with a dashed border — the dropzone — that takes files dragged onto it or opens the file picker when clicked, then a list of the chosen files, each with its name, size, a progress bar while it uploads and a button to remove it. On a phone the same control opens the photo or file picker.
Star rating — A row of five stars that either shows a score, such as 4.5 stars from 1,280 reviews, or lets you give one by tapping a star. As a display it summarises everyone’s ratings, filling stars to the nearest half; as an input it is really a set of five radio buttons, where choosing the fourth star means four out of five.
Floating action button — One round button floating above everything, reserved for the screen's single most important action. Two FABs means zero priorities.
Button group — Related actions lined up shoulder to shoulder, sharing borders and importance. When one matters most, it gets the filled style — the rest stay quiet.
Overflow menu — Three dots holding the actions there was no room to show. Fine for the rarely used; a graveyard for anything people need every day.
Pull to refresh — Drag the top of a list down and let go to load what is new. A gesture nobody can see, so it needs a visible way to refresh beside it for anyone who cannot or will not swipe.
Split button — One button in two parts: the main part runs the most common action at once, and a narrow arrow segment beside it opens a menu of related alternatives — Send or Schedule send, Paste or Paste special, Save or Save as. It replaces a row of buttons when one choice is used most of the time.
Ribbon — The wide band of commands across the top of Microsoft Word, Excel, PowerPoint and Outlook, organised into tabs — Home, Insert, Layout — with each tab’s buttons grouped by task. Office introduced it in 2007 to replace the old menus and toolbars; Ctrl+F1 hides or shows it.
Ghost button — A see-through button: a transparent fill with a thin outline and a label in the outline’s colour, so the photo or colour behind it shows through. It sits beside a solid primary button as the second choice (Sign up / Log in) or over a hero image. Many design systems call this an outline button and keep “ghost” for one with no border at all, which shows a background only on hover.
Toolbar — A row of buttons, mostly icons, for the commands you use most in an app or window: Bold, Italic and Link in an editor; Back, Share and Delete in a photo app. It runs along the top or bottom edge of a window or screen, and commands that do not fit go into an overflow (⋯) menu. A ribbon is many toolbars stacked into tabs.
Drag and drop list — A list you reorder by dragging: grab an item, usually by its handle of six dots (⋮⋮), and as you drag it the other items slide apart to show where it will land; let go and it drops into place. To-do apps, playlists, form builders and menu or tab order settings use it. It needs a keyboard or button alternative, because not everyone can drag.
Bottom sheet — A card that slides up over the screen for a quick sub-task while keeping the parent visible.
Modal dialog — A window that dims the world and demands an answer before anything else can happen. Powerful and rude — spend it only on decisions that truly block.
Action sheet — A short list of verbs answering one question: "what do you want to do with this?" Destructive options are dressed in red. On iPhone it used to slide up from the bottom with Cancel set apart; since iOS 26 it usually pops up from the button you tapped, as on iPad, with no Cancel: tapping anywhere else dismisses it.
Tooltip — A tiny label that appears on hover or focus to name or explain the thing under the pointer. If the interface needs it to be understood, the interface is hiding too much.
Popover — A small panel that opens beside the thing you clicked, pointing back at it, and holds real content — options, a short form, a preview. Unlike a tooltip it waits for a click and can be used; unlike a modal it leaves the page alone.
Context menu — The menu that appears right where you right-click — or touch and hold on a phone — with actions for the thing under your pointer or finger: Copy, Paste, Rename, Delete, Open in new tab. What it offers depends on what you clicked, which is where the name comes from.
Coach marks — Short tips that point at parts of an app the first time you use it — often with the rest of the screen dimmed and a spotlight on one button — saying what it does, with Next or Got it to move on. A run of them is a product tour. They should be brief and skippable, and never come back once dismissed.
Lightbox — An overlay that shows a photo or video enlarged over the page, with the page dimmed behind it, a close (×) button, arrows or swipes to move through the rest of the gallery, and often a caption and a count (3 / 12). It opens when you click a thumbnail and closes with Esc or a click on the dark backdrop: a modal made for looking at media.
Toast — A short confirmation that pops in, delivers one line, and leaves on its own. Never put anything in a toast the user must act on.
Progress bar — A track that fills to show how much of a job is done. Honest ones are tied to real work; the rest are just animated apologies.
Skeleton screen — Grey ghost shapes standing in for content while it loads, promising the layout before the data arrives. Feels faster than a spinner because it shows where things will land.
Empty state — What a screen says when there's nothing to show. The good ones explain why it's empty and hand you the one action that fills it.
Badge — A tiny count or dot pinned to an icon, whispering "something's waiting for you in here." Loses all power the day it's always on.
Loading spinner — A circle that keeps turning to say “working on it” — and nothing else. Fine for a second or two; any longer and people want to know how long, so show a progress bar or a skeleton instead.
Alert banner — A full-width strip at the top of a page or section that states something worth knowing and stays until it is dealt with or dismissed. Louder than a toast, quieter than a modal — and never more than one at a time.
Typing indicator — The bubble with three animated dots that appears in a chat while the other person is writing a reply. It means they have started typing, not that a message is on its way: if they stop or delete the draft, the bubble goes away. Some apps show “typing…” text instead.
Splash screen — The screen that fills the display for a moment while an app starts — usually its icon or logo on a plain background — before the first real screen appears. Apple calls it the launch screen. It should cover loading time, not add a delay of its own.
Read receipts — The small note under a message that tells the sender it has been seen: “Read 9:41” in iMessage, two blue ticks in WhatsApp, “Seen” or the reader’s tiny profile picture in Messenger and Instagram. Before that, “Delivered” or two grey ticks mean it reached the other phone. Most apps let you stop sending them; in WhatsApp that also stops you seeing other people’s.
Card — A bounded container that makes one item — image, title, meta, action — feel like a single graspable thing. The workhorse of every feed and grid.
Carousel — A horizontal strip of items you swipe through, with a peek of the next one as the invitation. Position dots keep you honest about how deep it goes.
Accordion — Stacked headers that expand one section at a time, keeping long content scannable. The chevron is the promise; the collapse is the mercy.
Timeline — Events in time order along a line, each a dot with a short title and a date: a parcel going from ordered to delivered, an account’s activity, a project’s milestones, a company’s history. Filled dots have happened; hollow ones are still to come. Unlike a stepper, it records what happens rather than waiting for you to do the next step.
Avatar — The small circle, sometimes a rounded square, that stands for a person: their profile photo, or their initials or a grey silhouette when there is none. It sits beside their name, comments and messages, and as the account button in a corner of the header; a dot on its edge can show they are online. Several overlapping in a row are an avatar group.
Data table — Rows and columns for comparing many records across the same attributes. Sortable headers are the contract; alignment does the reading.
Tree view — A list that opens like folders: an item with children has an arrow (▸) that expands it to show what is inside, indented one level deeper, and collapses it again (▾). The folder pane of a file manager, the file list of a code editor and the mailbox list of an email app use it to show a hierarchy without showing everything at once.
Dynamic Island — The black pill at the top of newer iPhones that hides the front camera and grows to show live activity — a call, a timer, music, directions. Apple turned a hole in the screen into a place for status.
Status bar — The thin strip along the top of a phone screen with the time, signal, Wi-Fi and battery. It belongs to the system, not the app — an app only chooses whether its icons are light or dark.
Home indicator — The thin line at the bottom of iPhones without a Home button. It is not decoration: swipe it up to go home, up and hold for the app switcher, sideways to jump between apps.
Notch — The black cutout at the top edge of the screen that holds the front camera and Face ID sensors. The screen wraps around it, so the status bar is split into two “ears”, one on each side.
Control Center — The panel of shortcuts you pull down from the top-right corner of an iPhone: Wi-Fi, Bluetooth, brightness, volume, flashlight, timer. The settings you touch every day, one swipe from any screen.
Notification Center — The list of notifications you pull down from the top of an iPhone, grouped by app, newest first. Anything you did not deal with on arrival waits here until you clear it.
AssistiveTouch — The floating grey circle some iPhone screens show: an accessibility shortcut that opens a menu for Home, Control Center, screenshots and gestures. Someone turned it on in Settings — it is not a glitch.
Quick Settings panel — The grid of toggles at the top of the Android pull-down shade — Wi-Fi, Bluetooth, flashlight, rotation, Do Not Disturb. Swipe down once for a short row, twice for the full panel; Samsung calls it the Quick panel.
Android navigation bar — The strip at the bottom of an Android screen with the Back, Home and Recents buttons — or, with gesture navigation, just a thin handle. It belongs to the system, not the app; an app’s own tabs sit above it.
Edge panel — Samsung’s sidebar: a small handle on the edge of the screen that slides out a panel of favourite apps, contacts or tools from any screen. A shortcut drawer that belongs to the phone, not to the app you are in.
Mac menu bar — The strip across the top of a Mac screen: the Apple menu and the menus of whichever app is in front, then status icons, Control Center and the clock on the right. The menus change with the app; the bar itself never moves.
Dock — The row of app icons along the bottom (or side) of a Mac screen: apps you keep there, open apps, recent apps, then the Downloads folder and the Trash. Click to open; a dot underneath means the app is running.
Taskbar — The bar along the bottom of a Windows screen: the Start button, search, pinned and open apps, and on the right the notification area with Wi-Fi, volume, battery and the clock. One click switches to any open window.
System tray — The corner at the right end of the Windows taskbar with Wi-Fi, volume, battery, the clock and the icons of apps running in the background. Microsoft’s official name is the notification area; the small up arrow beside it shows hidden icons.
Privacy indicator — The small orange or green dot at the top of the screen that lights up while an app is using the microphone or camera, so you always know when you could be recorded. iPhone, iPad, Mac and Android phones all show one; Control Center or the pull-down shade names the app.
Widget — A small live tile from an app that sits on the home screen, lock screen or desktop and shows one piece of its information — the weather, your next meeting, a photo — without opening the app. Tapping it opens the app; some widgets have buttons of their own.
App drawer — The screen on an Android phone that lists all your apps, usually A to Z, so the home screen only has to hold the ones you choose. On most phones you swipe up from the home screen to open it; Google’s help calls it All apps and Samsung the Apps screen. The iPhone equivalent is the App Library.
App switcher — The screen that shows your recently used apps as a row of cards, so you can jump back to one or swipe it away to close it. On iPhone you swipe up from the bottom and pause; Android calls it Recents and opens it the same way, or with the square button.
Share sheet — The panel that slides up when you tap Share: a row of people you message often, a row of apps to send to, and a list of actions such as Copy, Save to Files or Print. The system draws it, so it looks the same in every app; Android calls it the Sharesheet.
Window controls — The buttons in the corner of every app window that close it, minimize it and make it fill the screen. On a Mac they are the red, yellow and green dots at the top left, nicknamed traffic lights; on Windows they are the minimize, maximize and close (X) buttons at the top right.
Lock screen — The screen a phone, tablet or computer shows while it is locked: the time and date in large type over your wallpaper, new notifications and, on phones, shortcuts such as the flashlight and camera, with widgets and Live Activities on iPhone. You can glance at it without unlocking; opening apps or anything personal needs Face ID, a fingerprint, a PIN or a password.
Always-on display — A dimmed version of the lock screen that stays on while the phone sleeps, so you can see the time, date, widgets and notification icons without touching it. The screen drops to very low brightness and refresh rate to save power: iPhone can keep a darkened wallpaper or go black, while many Android phones show only a clock on black. Raising, tapping or unlocking the phone wakes the full screen.
Live Activities — Live cards for something happening right now, such as a delivery on its way, a ride arriving, a game score or a timer, that apps put on the iPhone Lock Screen and, on iPhones with a Dynamic Island, in the island while you use other apps. Each one updates on its own and goes away when the event ends; it can stay active for up to eight hours. They can also appear in StandBy, in CarPlay and on a paired Apple Watch.
Header — The band across the top of every page of a website: the logo on one side, the main navigation links in the middle or on the right, and often search, sign-in or a call-to-action button. The navigation inside it is the navbar.
Footer — The band across the bottom of every page of a website: secondary links (About, Contact, Careers), legal pages, social icons, copyright and sometimes a newsletter sign-up. It is where people scroll when they cannot find something in the header.
Sidebar — A column down the left or right side of a page, beside the main content. On the left it usually holds navigation (dashboards, docs, admin tools); on the right, related content — filters, a table of contents, ads or “more like this”.
Hero section — The first big block of a landing page, right under the header: a headline that says what the product is, a line of support, one or two call-to-action buttons and usually a large image or video. It is the part people see before they scroll.
Favicon — The small icon a website shows in the browser tab, beside bookmarks and in history — usually a simplified version of the logo. The same image, at larger sizes, becomes the shortcut icon when someone adds the site to a phone’s home screen.
Scrollbar — The thin bar along the edge of a scrolling area that shows how far down you are and how much is left. The part you drag is the thumb; the groove it slides in is the track. Phones and Macs often hide it until you scroll.
Cookie consent banner — The bar or box a website shows on your first visit to ask whether it may use cookies — usually with Accept, Reject and a link to choose by category. It exists for privacy law, so its buttons have rules: refusing must be as easy as accepting.
Back to top button — A small button, usually an up arrow in a corner, that appears after you scroll down a long page and takes you back to the top in one tap. It saves a long scroll back to the header and its navigation.
Infinite scroll — A list or feed that loads the next batch of items automatically as you near the bottom, so the page seems never to end. Feeds love it; pages where people need to find, compare or reach the footer often do not.
Placeholder text — The grey hint inside an empty text field — “Search products”, “name@example.com” — that disappears as soon as you type. It shows an example or format; it is not a label, because it vanishes exactly when people need it.
Marquee (scrolling text) — A strip of text or logos that slides continuously sideways across the screen — a news ticker, a stock ticker, a row of client logos, a sale announcement. Eye-catching, but moving text is hard to read and must be pausable.
Address bar — The long field at the top of a web browser that shows the address (URL) of the page you are on and where you type a new one. In today’s browsers it doubles as the search box; Chrome’s developers call it the omnibox, and Safari on the Mac calls it the Smart Search field. On phones it often sits at the bottom of the screen.
Mega menu — A large panel that drops down from a website’s top navigation and shows many links at once, grouped into columns with headings — sometimes with pictures or a featured offer. Shops and sites with many sections use it so people can see a whole section without clicking page after page.
Bento grid — A layout of rounded cards in different sizes fitted together into one tidy rectangle — a big card beside two small ones, a wide one under them — each showing one feature, number or image. Named after the compartments of a Japanese bento lunch box, it is a common way to show a product’s features on a landing page.
Masonry layout — A grid of cards in equal-width columns where each card keeps its own height, so the columns end at different points but there are no gaps between cards, like stones in a wall. Pinterest made it familiar; photo galleries, portfolios and blogs use it for images of mixed shapes. Unlike a bento grid, the arrangement comes from the content rather than a fixed plan.
Language selector — The control that switches a website or app to another language: usually a globe icon or the current language’s name (English ▾) in the header or footer, opening a list where each language is written in its own name and script, such as Deutsch, Español and 日本語. Flags are best avoided, since they stand for countries rather than languages, and switching should keep you on the same page.