Terms by topic · 147 guides

Interface

Learn the names of buttons, menus, forms, and other parts people use on a screen.

01 / Atlas

All Interface terms

Open a term for a simple meaning, an example, when to use it, how official it is, and its code name.

01 · Core
Accessible Description

An accessible description adds helpful details that an element's accessible name does not provide. It can explain a format, limit, or consequence.
02 · Core
Accessible Name

An accessible name is the label software computes for a control or image. Screen readers use it to identify the item.
03 · Core
Accordion

An accordion stacks sections whose headings can open or close their own content.
04 · More detail
Activity Log

An activity log lists product actions in time order. Each row says who did what, to which item, and when.
05 · Core
Alert

An alert is a short, important message that is announced without moving keyboard focus. It does not ask the user to answer at once.
06 · More detail
Alert Dialog

An alert dialog is a modal dialog for an urgent choice. People must understand the result before they continue.
07 · More detail
Alert, Banner & Notification — Learning Bundle

This learning bundle compares three kinds of feedback. An alert tells an important state. A banner stretches across an area. A notification goes into a stream people can check later. The bundle is not one standard status pattern.
08 · Core
Alternative Text

Alternative text explains an image's useful meaning when someone cannot see the image. It should match the image's job on that page.
09 · Core
Analytics Dashboard

An analytics dashboard combines a few related measures and charts. It gives a quick overview of one question.
10 · More detail
ARIA Feed Pattern

The ARIA feed pattern is a changing stream of article-like items. It may add new items or remove old ones as people move through it.
11 · More detail
ARIA Grid

An ARIA grid is an interactive set of rows and cells. Arrow keys move focus up, down, left, and right.
12 · Core
Avatar

An avatar is a small picture, initials, or symbol. It helps identify a person, team, bot, or account.
13 · Core
Back to Top

Back to Top is a shortcut on long pages. It returns the view and focus near the start.
14 · Core
Badge

A badge is a small, non-clickable mark attached to another item. It shows a count, status, or short signal and is a design pattern, not a web standard.
15 · More detail
Badge, Chip & Tag — Learning Bundle

This learning bundle compares three labels that vary by design system. A badge often shows status or a count. A tag sorts content into a group. A chip may be interactive. The bundle is not one standard component term.
16 · Core
Banner Landmark

A banner landmark is the main header area for a whole website. A wide announcement strip may also be called a banner, but it is a different design pattern.
17 · More detail
Bottom Sheet

A bottom sheet is a touch-friendly panel. It rises from the bottom and may stop at set heights.
18 · Core
Breadcrumb

A breadcrumb is a path of links that shows the current page and its parent pages.
19 · Core
Bulk Actions

Bulk actions let someone choose many items and run one action on the whole chosen set.
20 · Core
Button

A button is a control you press to make something happen on the current screen.
21 · Core
Calendar View

A calendar view places scheduled items on days or time slots. People can scan a day, week, or month.
22 · Core
Call to Action

A call to action is a clear invitation that guides people to the next useful step.
23 · Core
Captions and Transcript

Captions are text timed with speech and useful sounds. A transcript is a readable text version of the whole audio or video.
24 · Core
Card

A card is a clearly bounded group that shows one subject, its details, and related actions.
25 · Core
Carousel

A carousel shows one or a few panels at a time. People move it with arrows, dots, or swipes.
26 · More detail
Cascader

A Cascader shows choices one level at a time. One choice opens the next matching list.
27 · More detail
Chart

A Chart turns data into a picture. It can show comparisons, trends, ranges, or links.
28 · Core
Chat UI

A chat UI joins messages, sender names, a writing box, send states, and attachments. It also shows ways to fix errors.
29 · Core
Checkbox

A checkbox is a box you can check or clear. Each choice can stand on its own.
30 · Core
Chip

A chip is a small interactive item that stands for an input, filter, choice, or removable item. Its exact action must be clear.
31 · Core
Color Picker

A Color Picker lets people choose a color. It may show a color field, hue bar, values, or swatches.
32 · More detail
Command Palette

A command palette is a keyboard-friendly search panel. It opens actions, pages, and recent items.
33 · Core
Content Reflow

Content reflow fits a page into a narrow space without losing content or functions. Most reading should not need two-way scrolling.
34 · More detail
Context Menu

A context menu shows commands for the object or area that opened it. It often opens with a right-click or context-menu key.
35 · Core
Current Item (aria-current)

aria-current tells assistive tools which item is current in a related set. It does not mean the item is selected.
36 · More detail
Data Grid

A data grid is an app-like table. People can move, select, sort, or edit lots of data.
37 · Core
Data Import Workflow

A data import workflow checks an uploaded file, matches its columns, previews changes, and reports every import result.
38 · Core
Date & Time Picker

A date and time picker helps people choose a valid date, time, or range. It may show a calendar or clock.
39 · Core
Date Picker

A date picker is a control for typing or choosing a day on a calendar. It does not choose a time of day.
40 · Core
Description List

A Description List pairs each name with a value or explanation. It suits short, read-only facts.
41 · Core
Disclosure

A disclosure is a button that shows or hides a related section. It also tells software whether the section is open.
42 · Core
Divider

A divider is a visible or semantic line between groups, controls, or topic parts.
43 · Core
Drawer

A drawer slides in from a screen edge. Part of the page behind it stays visible.
44 · More detail
Dropdown & Context Menu — Learning Bundle

This learning bundle compares menus by how they open. A dropdown opens from a control. A context menu belongs to one object and often opens at the pointer. The bundle is not one standard menu term.
45 · Core
Dropdown Menu

A dropdown menu is a short-lived command menu that opens from a button and stays next to it. Its usual semantic pattern is a menu button plus a menu.
46 · More detail
Editable Combobox

An editable combobox is a text field joined to a list that filters as you type.
47 · Core
Empty State

An empty state appears when a list or workspace has no content right now. It explains why and gives a useful next step.
48 · Core
Empty, Error & Success State — Learning Bundle

This learning bundle covers three different app states. Empty means there is no content yet. Error means something failed. Success confirms completion. Each needs its own message and next step. The bundle is not one standard state term.
49 · Core
Error State

An error state stays visible when an action or page fails. It explains the specific problem and gives a safe way to recover.
50 · Core
Error Summary

An error summary is a short list at the top of a form. Each item explains an error and links to its field.
51 · Core
FAQ

An FAQ collects questions people often ask before deciding or getting help. The answers use the words and situation those people know.
52 · Core
Fieldset and Legend

`<fieldset>` and `<legend>` are built-in HTML elements for a group of related form controls. The legend states the question they share.
53 · Core
File Upload

File upload covers choosing, checking, sending, and managing files from a device.
54 · Core
Filter

A filter is a control or rule that shows only items matching chosen conditions. It doesn't change the source data.
55 · Core
Focus Management

Focus management moves the keyboard's active point after the page changes. It also returns focus when a temporary surface closes.
56 · Core
Focus Order

Focus order is the path keyboard focus follows through a page. It should match the reading and task order.
57 · More detail
Forced Colors Mode

Forced colors mode uses a user-chosen system palette instead of many page colors. This can make controls and text easier to distinguish.
58 · Core
Form Field

A full input unit with a visible label, a control, optional help, validation state, and a linked error message.
59 · Core
Form Label

A Form Label says what an input needs. Code links the label to its matching control.
60 · Core
Form Validation

Form validation uses rules and messages to find, prevent, and explain missing or wrong answers.
61 · Core
Global Search

Global search finds different kinds of things across an app from one shared search place.
62 · Core
Hamburger Menu

A menu button with three lines. It opens the site's main navigation when there is not enough room to show it.
63 · Core
Heading Hierarchy

A heading hierarchy uses heading levels to show how page sections fit together.
64 · Core
Hero Section

A hero section is the main opening area of a page. It quickly explains the promise, who it's for, the proof, and the next action.
65 · More detail
Hover Card

A hover card is a rich preview. It opens when a reference is hovered or focused, without blocking the page.
66 · Core
Icon

An icon is a small symbol that helps people recognize an action, object, status, or group.
67 · Core
Image

An Image is a picture inside content. It needs size, loading, crop, and alt-text rules that fit its purpose.
68 · Core
In-App Notification Center

An in-app notification center keeps useful updates in one place. Each item shows what changed, when, and whether it is unread.
69 · More detail
Infinite Scroll

Infinite scroll loads more feed items when a reader nears the current end.
70 · More detail
Insertion Caret

An insertion caret is the blinking line in editable text. It shows where the next typed or pasted character will go.
71 · Core
Kanban Board

A Kanban board shows the real steps that work moves through. Cards represent work, and WIP limits prevent too many starts.
72 · Core
Keyboard Trap

A keyboard trap happens when focus enters a part of the page but cannot leave with the keyboard.
73 · Core
Landmark

A landmark is a major area of a page. Assistive technology lets people jump straight to that area.
74 · More detail
Lightbox

A lightbox opens media in a larger viewer and darkens the page around it.
75 · Core
Link

A link is text or media that opens another page, file, or place.
76 · Core
List

A list shows related items in an order that's useful or easy to follow.
77 · More detail
Listbox

A listbox is a custom list of choices. It manages which choice is active and how arrow keys move through the list.
78 · More detail
Live Region

A live region tells assistive technology when important page text changes. It can announce the update without moving focus.
79 · Core
Media Player

A media player is a set of controls for audio or video. It includes play, progress, volume, captions, and other playback choices.
80 · Core
Member Management

Member management is the place where allowed admins invite people, see their status, change roles, or remove access.
81 · Core
Menu

A command menu is a group of actions or choices with special keyboard focus rules. It usually opens from a button or another command area.
82 · More detail
Menu & Menubar — Learning Bundle

This learning bundle compares two different terms. A menu lists commands. A menubar is an always-visible group of command menus. The bundle is not one standard interface term.
83 · More detail
Menu Button

A menu button opens a list of actions or choices. It tells software whether the menu is open.
84 · More detail
Menubar

A menubar is a menu that stays visible, often in one horizontal row. Its items open commands or submenus with app-style keyboard rules.
85 · Core
Meter

A meter shows one measurement inside a known range. It can also mark low, high, and best ranges.
86 · Core
Modal Dialog

A modal dialog is a focused window. It blocks the current screen until someone closes or finishes it.
87 · Core
Multi-Step Form

A multi-step form splits one long task into smaller pages. It checks the answers before sending them.
88 · Core
Navigation Bar

A navigation bar groups the main page links and shows which page is open now.
89 · Core
Navigation Rail

A navigation rail is a short vertical list of main places along the edge of a screen. It is a common design pattern, not a web standard.
90 · More detail
Numeric Stepper (Visual Pattern)

A numeric stepper shows a number you can type and controls to add or subtract. It may use a native number input or ARIA spinbutton semantics. Plus and minus buttons alone do not create those semantics.
91 · Core
Overflow Menu Button

A small button, often shown as three dots, opens less important actions. Use it when those actions do not fit on the page.
92 · Core
Pagination

Pagination splits a collection into numbered pages and shows which page is open.
93 · Core
Permission Matrix

A permission matrix shows which roles can do each action in a chosen area. It makes access rules easier to compare.
94 · Core
Pointer & Cursor

A pointer or cursor marks where a pointing device sits on the screen. Its shape can mean select, type, drag, resize, wait, or unavailable.
95 · Core
Popover

A popover is a small panel attached to the control that opened it. It can hold structured content and actions without blocking the page.
96 · Core
Pricing Table

A pricing table organizes plans, prices, limits, features, and buying terms for comparison.
97 · Core
Progress Indicator

A progress indicator shows that work is still happening. A bar or ring shows known progress. A spinner means the wait time is unknown.
98 · Core
Progress Ring

A circle that shows how much of a measurable task is done.
99 · Core
Progressbar

A progressbar shows how much of a timed task is done. People can read it but do not control it directly.
100 · Core
Quote

A quote repeats someone's words and clearly names where those words came from.
101 · Core
Radio Group

A radio group shows several choices but lets a person select exactly one.
102 · Core
Rating

A rating shows an opinion on a fixed scale. The scale may use stars, numbers, or named levels.
103 · Core
Read-only Field

A read-only field can receive focus and its value can be copied. The person cannot edit the value.
104 · More detail
Resize Handle

A resize handle is a visible spot on an edge or corner. People drag it to resize a panel, field, column, or object.
105 · More detail
Roving tabindex

Roving tabindex gives a group one Tab stop. Arrow keys then move focus among items inside the group.
106 · Core
Saved View

A saved view remembers how a list is filtered, sorted, and shown so the same useful view can open again.
107 · More detail
Scrim

A scrim is a see-through dark layer behind an overlay. It separates the overlay and shows that the page below is blocked.
108 · Core
Search Field

A search field is a text box for finding content that may match typed words.
109 · More detail
Segmented Control

A segmented control joins a short row of choices that changes a mode, filter, or value.
110 · Core
Select

A select opens a fixed list and lets a person choose one value.
111 · Core
Semantic HTML

Semantic HTML means choosing HTML elements for what they do, not just how they look. The page keeps its structure and built-in behavior even without CSS.
112 · Core
Separator

A separator is a visible line that can also mark a real break between parts. If people can focus and move it, it becomes an adjustable splitter.
113 · Core
Settings Page

A settings page holds choices that change how an app works across tasks. Good defaults let most people start immediately.
114 · Core
Sidebar & Navigation Rail — Learning Bundle

This learning bundle compares two different navigation patterns. A sidebar is wider and has labels or tools. A navigation rail is narrow and often uses icons. The bundle is not one standard interface term.
115 · Core
Sidebar Navigation

Sidebar navigation is a side area with named links that can stay open or fold away. It often groups related places in a product.
116 · Core
Sign-In Form

A form that collects account details for sign-in. It must support recovery, password managers, clear errors, and secure sending.
117 · Core
Site Footer

A site footer is the closing area used across a website. It holds secondary links, legal details, contact paths, and trust information.
118 · Core
Site Header

A site header holds the brand, main navigation, account, and site-wide tools at the top.
119 · Core
Skeleton

A skeleton is a simple placeholder shaped like the content that's still loading.
120 · Core
Skip Link

A Skip Link helps keyboard users pass repeated menus. It moves focus to the main content or another key area.
121 · Core
Slider

A slider moves a thumb along a track to choose one value or range.
122 · Core
Social Proof

Social proof is evidence people can check. It shows that relevant people or groups use, trust, or value a product.
123 · More detail
Spinbutton

Spinbutton is the ARIA name for a control that picks one value from a set range. People can usually type a value or raise and lower it. A numeric stepper is one way it may look.
124 · Core
Spinner

A spinner loops to show active work when no useful completion number exists.
125 · Core
Statistic

A Statistic highlights one value. Its label, unit, time range, and context explain the meaning.
126 · Core
Status Message

A status message reports a result, progress, or wait without opening a dialog or taking focus away.
127 · Core
Steps

Steps show a person's place in a short process. The process has a fixed order and end.
128 · Core
Subscription Management

Subscription management shows a customer's current paid plan and lets them understand or change future billing.
129 · Core
Success State

A success state confirms that an action finished. It shows the lasting result and any useful next step.
130 · Core
Switch

A switch turns one setting on or off, and the change usually happens right away.
131 · Core
Table

A table lines up related facts in labeled rows and columns. It's usually read-only or has only simple actions.
132 · Core
Tabs

Tabs use labels to switch content in one shared panel. The main task stays open.
133 · Core
Tag

A tag is a short label that usually cannot be clicked. It groups an item or shows a steady status. A tag is a design pattern, not a web standard.
134 · Core
Target Size

Target size is the full area a person can click or tap to use a control. It may be larger than the visible icon.
135 · Core
Text Field

A text field is a labeled, one-line box where people type or edit text.
136 · Core
Text Selection

Text Selection is the marked text range. People select text to copy, replace, note, or edit it.
137 · Core
Textarea

A textarea is a box for typing several lines of text. Its size may stay fixed or be adjustable.
138 · Core
Time Picker

A time picker is a control for typing or choosing a local time of day. Its step size and local display format must be clear.
139 · Core
Timeline

A timeline puts events, states, or milestones in time order along one visible path.
140 · Core
Toast

A toast is a short status message. It doesn't block the page and usually leaves on its own.
141 · More detail
Toggle Group

A labeled group of on-or-off buttons. One or more separate options can stay pressed.
142 · More detail
Toolbar

A toolbar is a named group of controls people use often. Tab enters the group once, then arrow keys move inside it.
143 · Core
Tooltip

A tooltip is a short note about a control. It opens when a mouse hovers or a keyboard focuses the control. People can't use it like a button.
144 · More detail
Tree Select

A Tree Select shows nested choices in an openable tree. It can allow one or many choices.
145 · Core
Tree View

A tree view is a list with levels. Parent rows open or close to show the child items inside them.
146 · More detail
Treegrid

A treegrid is an interactive table with rows that can have child rows. People can open the row levels while cells still line up in columns.
147 · More detail
Web Notification

A web notification is a message the browser or operating system shows outside the page. The user must give permission, and the message follows system rules.