UI terminology
A good understanding of UI terminology makes it much easier to communicate with designers, developers, and AI tools. Below is a fairly complete list of common GUI terms used in web application development.
1. Layout
| Term |
Description |
| View |
A complete screen/page shown to the user. |
| Page |
A browser page. |
| Screen |
A complete application view (often used for mobile). |
| Layout |
The overall arrangement of UI elements. |
| Container |
Holds other components. (div, section) |
| Panel |
A grouped area of related controls. |
| Pane |
A resizable section of the interface. |
| Region |
A logical area of the page. |
| Sidebar |
Vertical panel at the left or right. |
| Content Area |
Main working area. |
| Header |
Top section. |
| Footer |
Bottom section. |
| Toolbar |
Row containing action buttons. |
| Status Bar |
Displays application status. |
| Navigation Bar |
Contains navigation items. |
| Dock |
Area where panels attach. |
| Split View |
Two or more resizable panes. |
2. Navigation
| Term |
Description |
| Menu |
Collection of commands. |
| Menu Bar |
Horizontal row of menus. |
| Context Menu |
Right-click menu. |
| Hamburger Menu |
Three-line menu icon. |
| Breadcrumb |
Shows current location. |
| Tabs |
Switch between pages or panels. |
| Pagination |
Page navigation. |
| Stepper |
Multi-step wizard indicator. |
| Wizard |
Guided multi-step interface. |
| Accordion |
Expandable sections. |
| Tree View |
Hierarchical navigation. |
| Drawer |
Sliding side panel. |
| Term |
Description |
| Button |
Performs an action. |
| Icon Button |
Button containing only an icon. |
| Floating Action Button (FAB) |
Large floating action button (Material Design). |
| Toggle Button |
On/off button. |
| Split Button |
Main action with dropdown. |
| Dropdown Button |
Opens a menu. |
| Scroll Button |
Scrolls content. |
| Chevron Button |
Uses chevron icon (< > ^ v). |
| Collapse Button |
Hides a panel. |
| Expand Button |
Shows hidden content. |
| Close Button |
Usually X. |
| Back Button |
Navigate back. |
| Next Button |
Navigate forward. |
| Term |
Description |
| Text Box |
Single-line input. |
| Text Area |
Multi-line input. |
| Password Field |
Hidden text input. |
| Search Box |
Search input. |
| Checkbox |
Multiple selection. |
| Radio Button |
Single selection. |
| Toggle Switch |
Modern on/off control. |
| Slider |
Select numeric value. |
| Spinner |
Numeric input with arrows. |
| Date Picker |
Calendar selector. |
| Time Picker |
Time selector. |
| Color Picker |
Select color. |
| File Picker |
Upload file. |
| Dropdown |
Select from list. |
| Combo Box |
Input + dropdown. |
| Autocomplete |
Suggests matching values. |
| Multi-select |
Select multiple items. |
5. Lists & Data
| Term |
Description |
| List |
Collection of items. |
| List Item |
Individual entry. |
| Table |
Rows and columns. |
| Data Grid |
Interactive table. |
| Card |
Self-contained information block. |
| Tile |
Card-like item. |
| Grid |
Rows and columns layout. |
| Gallery |
Image collection. |
| Carousel |
Horizontally scrolling items. |
| Timeline |
Chronological events. |
| Tree |
Nested hierarchy. |
6. Containers
| Term |
Description |
| Card |
Small grouped container. |
| Panel |
Larger grouped container. |
| Modal |
Dialog blocking interaction. |
| Dialog |
Popup window. |
| Popup |
Temporary overlay. |
| Popover |
Small contextual popup. |
| Tooltip |
Small hover help. |
| Toast |
Temporary notification. |
| Snackbar |
Material Design notification. |
| Overlay |
Layer above content. |
7. Feedback
| Term |
Description |
| Alert |
Important message. |
| Notification |
General message. |
| Confirmation Dialog |
Asks for confirmation. |
| Error Message |
Shows an error. |
| Success Message |
Indicates success. |
| Warning |
Potential problem. |
| Badge |
Small count indicator. |
| Progress Bar |
Shows progress. |
| Progress Ring |
Circular progress. |
| Spinner |
Loading animation. |
| Skeleton Screen |
Placeholder while loading. |
| Term |
Description |
| Scrollbar |
Draggable scroll indicator. |
| Scroll Thumb |
The draggable part. |
| Scroll Track |
Background of scrollbar. |
| Scroll Button |
Arrow button for scrolling. |
| Viewport |
Visible area. |
| Infinite Scroll |
Loads more while scrolling. |
| Sticky Header |
Remains visible. |
| Sticky Footer |
Remains visible. |
| Scroll Snap |
Snaps scrolling to items. |
9. Windows & Panels
| Term |
Description |
| Window |
Independent application area. |
| Docked Panel |
Attached to an edge. |
| Floating Panel |
Can be moved freely. |
| Inspector |
Shows selected object properties. |
| Properties Panel |
Edit properties. |
| Sidebar |
Secondary panel. |
| Explorer |
Hierarchical browser. |
10. Icons
| Term |
Description |
| Chevron |
< > ^ v |
| Caret |
Small filled triangle |
| Arrow |
Directional icon |
| Hamburger |
☰ |
| Kebab Menu |
⋮ |
| Meatballs Menu |
••• |
| Plus |
Add |
| Minus |
Remove |
| Gear |
Settings |
| Trash |
Delete |
| Pencil |
Edit |
| Magnifier |
Search |
| Home |
Home page |
| Bell |
Notifications |
| User Avatar |
User profile |
11. Common States
| Term |
Description |
| Default |
Normal state. |
| Hover |
Mouse over. |
| Focus |
Keyboard focus. |
| Active |
Currently pressed. |
| Selected |
Chosen item. |
| Disabled |
Cannot interact. |
| Read-only |
Viewable but not editable. |
| Hidden |
Not visible. |
| Expanded |
Open. |
| Collapsed |
Closed. |
| Loading |
Busy. |
| Empty State |
No content yet. |
12. Layout Concepts
| Term |
Description |
| Responsive Layout |
Adapts to screen size. |
| Breakpoint |
Width where layout changes. |
| Grid System |
Column-based layout. |
| Flex Layout |
Flexible alignment. |
| Whitespace |
Empty spacing. |
| Padding |
Space inside an element. |
| Margin |
Space outside an element. |
| Alignment |
Positioning of content. |
| Gap |
Space between flex/grid items. |
| Z-index |
Stacking order. |
The most important terms
If someone is discussing a web application's UI, these are the terms you'll hear most often:
These terms are widely used across frameworks such as Bootstrap, Material UI, Ant Design, Fluent UI, Tailwind UI, and most design systems.
