# 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

<div id="bkmrk-term-description-vie"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>View</td><td>A complete screen/page shown to the user.</td></tr><tr><td>Page</td><td>A browser page.</td></tr><tr><td>Screen</td><td>A complete application view (often used for mobile).</td></tr><tr><td>Layout</td><td>The overall arrangement of UI elements.</td></tr><tr><td>Container</td><td>Holds other components. (`div`, `section`)</td></tr><tr><td>Panel</td><td>A grouped area of related controls.</td></tr><tr><td>Pane</td><td>A resizable section of the interface.</td></tr><tr><td>Region</td><td>A logical area of the page.</td></tr><tr><td>Sidebar</td><td>Vertical panel at the left or right.</td></tr><tr><td>Content Area</td><td>Main working area.</td></tr><tr><td>Header</td><td>Top section.</td></tr><tr><td>Footer</td><td>Bottom section.</td></tr><tr><td>Toolbar</td><td>Row containing action buttons.</td></tr><tr><td>Status Bar</td><td>Displays application status.</td></tr><tr><td>Navigation Bar</td><td>Contains navigation items.</td></tr><tr><td>Dock</td><td>Area where panels attach.</td></tr><tr><td>Split View</td><td>Two or more resizable panes.</td></tr></tbody></table>

</div></div></div>---

# 2. Navigation

<div id="bkmrk-term-description-men"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Menu</td><td>Collection of commands.</td></tr><tr><td>Menu Bar</td><td>Horizontal row of menus.</td></tr><tr><td>Context Menu</td><td>Right-click menu.</td></tr><tr><td>Hamburger Menu</td><td>Three-line menu icon.</td></tr><tr><td>Breadcrumb</td><td>Shows current location.</td></tr><tr><td>Tabs</td><td>Switch between pages or panels.</td></tr><tr><td>Pagination</td><td>Page navigation.</td></tr><tr><td>Stepper</td><td>Multi-step wizard indicator.</td></tr><tr><td>Wizard</td><td>Guided multi-step interface.</td></tr><tr><td>Accordion</td><td>Expandable sections.</td></tr><tr><td>Tree View</td><td>Hierarchical navigation.</td></tr><tr><td>Drawer</td><td>Sliding side panel.</td></tr></tbody></table>

</div></div></div>---

# 3. Buttons &amp; Actions

<div id="bkmrk-term-description-but"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Button</td><td>Performs an action.</td></tr><tr><td>Icon Button</td><td>Button containing only an icon.</td></tr><tr><td>Floating Action Button (FAB)</td><td>Large floating action button (Material Design).</td></tr><tr><td>Toggle Button</td><td>On/off button.</td></tr><tr><td>Split Button</td><td>Main action with dropdown.</td></tr><tr><td>Dropdown Button</td><td>Opens a menu.</td></tr><tr><td>Scroll Button</td><td>Scrolls content.</td></tr><tr><td>Chevron Button</td><td>Uses chevron icon (&lt; &gt; ^ v).</td></tr><tr><td>Collapse Button</td><td>Hides a panel.</td></tr><tr><td>Expand Button</td><td>Shows hidden content.</td></tr><tr><td>Close Button</td><td>Usually X.</td></tr><tr><td>Back Button</td><td>Navigate back.</td></tr><tr><td>Next Button</td><td>Navigate forward.</td></tr></tbody></table>

</div></div></div>---

# 4. Input Controls

<div id="bkmrk-term-description-tex"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Text Box</td><td>Single-line input.</td></tr><tr><td>Text Area</td><td>Multi-line input.</td></tr><tr><td>Password Field</td><td>Hidden text input.</td></tr><tr><td>Search Box</td><td>Search input.</td></tr><tr><td>Checkbox</td><td>Multiple selection.</td></tr><tr><td>Radio Button</td><td>Single selection.</td></tr><tr><td>Toggle Switch</td><td>Modern on/off control.</td></tr><tr><td>Slider</td><td>Select numeric value.</td></tr><tr><td>Spinner</td><td>Numeric input with arrows.</td></tr><tr><td>Date Picker</td><td>Calendar selector.</td></tr><tr><td>Time Picker</td><td>Time selector.</td></tr><tr><td>Color Picker</td><td>Select color.</td></tr><tr><td>File Picker</td><td>Upload file.</td></tr><tr><td>Dropdown</td><td>Select from list.</td></tr><tr><td>Combo Box</td><td>Input + dropdown.</td></tr><tr><td>Autocomplete</td><td>Suggests matching values.</td></tr><tr><td>Multi-select</td><td>Select multiple items.</td></tr></tbody></table>

</div></div></div>---

# 5. Lists &amp; Data

<div id="bkmrk-term-description-lis"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>List</td><td>Collection of items.</td></tr><tr><td>List Item</td><td>Individual entry.</td></tr><tr><td>Table</td><td>Rows and columns.</td></tr><tr><td>Data Grid</td><td>Interactive table.</td></tr><tr><td>Card</td><td>Self-contained information block.</td></tr><tr><td>Tile</td><td>Card-like item.</td></tr><tr><td>Grid</td><td>Rows and columns layout.</td></tr><tr><td>Gallery</td><td>Image collection.</td></tr><tr><td>Carousel</td><td>Horizontally scrolling items.</td></tr><tr><td>Timeline</td><td>Chronological events.</td></tr><tr><td>Tree</td><td>Nested hierarchy.</td></tr></tbody></table>

</div></div></div>---

# 6. Containers

<div id="bkmrk-term-description-car"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Card</td><td>Small grouped container.</td></tr><tr><td>Panel</td><td>Larger grouped container.</td></tr><tr><td>Modal</td><td>Dialog blocking interaction.</td></tr><tr><td>Dialog</td><td>Popup window.</td></tr><tr><td>Popup</td><td>Temporary overlay.</td></tr><tr><td>Popover</td><td>Small contextual popup.</td></tr><tr><td>Tooltip</td><td>Small hover help.</td></tr><tr><td>Toast</td><td>Temporary notification.</td></tr><tr><td>Snackbar</td><td>Material Design notification.</td></tr><tr><td>Overlay</td><td>Layer above content.</td></tr></tbody></table>

</div></div></div>---

# 7. Feedback

<div id="bkmrk-term-description-ale"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Alert</td><td>Important message.</td></tr><tr><td>Notification</td><td>General message.</td></tr><tr><td>Confirmation Dialog</td><td>Asks for confirmation.</td></tr><tr><td>Error Message</td><td>Shows an error.</td></tr><tr><td>Success Message</td><td>Indicates success.</td></tr><tr><td>Warning</td><td>Potential problem.</td></tr><tr><td>Badge</td><td>Small count indicator.</td></tr><tr><td>Progress Bar</td><td>Shows progress.</td></tr><tr><td>Progress Ring</td><td>Circular progress.</td></tr><tr><td>Spinner</td><td>Loading animation.</td></tr><tr><td>Skeleton Screen</td><td>Placeholder while loading.</td></tr></tbody></table>

</div></div></div>---

# 8. Scroll &amp; Viewport

<div id="bkmrk-term-description-scr"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Scrollbar</td><td>Draggable scroll indicator.</td></tr><tr><td>Scroll Thumb</td><td>The draggable part.</td></tr><tr><td>Scroll Track</td><td>Background of scrollbar.</td></tr><tr><td>Scroll Button</td><td>Arrow button for scrolling.</td></tr><tr><td>Viewport</td><td>Visible area.</td></tr><tr><td>Infinite Scroll</td><td>Loads more while scrolling.</td></tr><tr><td>Sticky Header</td><td>Remains visible.</td></tr><tr><td>Sticky Footer</td><td>Remains visible.</td></tr><tr><td>Scroll Snap</td><td>Snaps scrolling to items.</td></tr></tbody></table>

</div></div></div>---

# 9. Windows &amp; Panels

<div id="bkmrk-term-description-win"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Window</td><td>Independent application area.</td></tr><tr><td>Docked Panel</td><td>Attached to an edge.</td></tr><tr><td>Floating Panel</td><td>Can be moved freely.</td></tr><tr><td>Inspector</td><td>Shows selected object properties.</td></tr><tr><td>Properties Panel</td><td>Edit properties.</td></tr><tr><td>Sidebar</td><td>Secondary panel.</td></tr><tr><td>Explorer</td><td>Hierarchical browser.</td></tr></tbody></table>

</div></div></div>---

# 10. Icons

<div id="bkmrk-term-description-che"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Chevron</td><td>&lt; &gt; ^ v</td></tr><tr><td>Caret</td><td>Small filled triangle</td></tr><tr><td>Arrow</td><td>Directional icon</td></tr><tr><td>Hamburger</td><td>☰</td></tr><tr><td>Kebab Menu</td><td>⋮</td></tr><tr><td>Meatballs Menu</td><td>•••</td></tr><tr><td>Plus</td><td>Add</td></tr><tr><td>Minus</td><td>Remove</td></tr><tr><td>Gear</td><td>Settings</td></tr><tr><td>Trash</td><td>Delete</td></tr><tr><td>Pencil</td><td>Edit</td></tr><tr><td>Magnifier</td><td>Search</td></tr><tr><td>Home</td><td>Home page</td></tr><tr><td>Bell</td><td>Notifications</td></tr><tr><td>User Avatar</td><td>User profile</td></tr></tbody></table>

</div></div></div>---

# 11. Common States

<div id="bkmrk-term-description-def"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Default</td><td>Normal state.</td></tr><tr><td>Hover</td><td>Mouse over.</td></tr><tr><td>Focus</td><td>Keyboard focus.</td></tr><tr><td>Active</td><td>Currently pressed.</td></tr><tr><td>Selected</td><td>Chosen item.</td></tr><tr><td>Disabled</td><td>Cannot interact.</td></tr><tr><td>Read-only</td><td>Viewable but not editable.</td></tr><tr><td>Hidden</td><td>Not visible.</td></tr><tr><td>Expanded</td><td>Open.</td></tr><tr><td>Collapsed</td><td>Closed.</td></tr><tr><td>Loading</td><td>Busy.</td></tr><tr><td>Empty State</td><td>No content yet.</td></tr></tbody></table>

</div></div></div>---

# 12. Layout Concepts

<div id="bkmrk-term-description-res"><div><div><table><thead><tr><th>Term</th><th>Description</th></tr></thead><tbody><tr><td>Responsive Layout</td><td>Adapts to screen size.</td></tr><tr><td>Breakpoint</td><td>Width where layout changes.</td></tr><tr><td>Grid System</td><td>Column-based layout.</td></tr><tr><td>Flex Layout</td><td>Flexible alignment.</td></tr><tr><td>Whitespace</td><td>Empty spacing.</td></tr><tr><td>Padding</td><td>Space inside an element.</td></tr><tr><td>Margin</td><td>Space outside an element.</td></tr><tr><td>Alignment</td><td>Positioning of content.</td></tr><tr><td>Gap</td><td>Space between flex/grid items.</td></tr><tr><td>Z-index</td><td>Stacking order.</td></tr></tbody></table>

</div></div></div>## The most important terms

If someone is discussing a web application's UI, these are the terms you'll hear most often:

- Header
- Footer
- Sidebar
- Toolbar
- Navigation Bar
- Content Area
- Card
- Panel
- Modal
- Dialog
- Drawer
- Accordion
- Tabs
- Breadcrumb
- Table / Data Grid
- Form
- Button
- Icon Button
- Dropdown
- Toggle Switch
- Checkbox
- Radio Button
- Search Box
- Tooltip
- Toast
- Notification
- Scrollbar
- Scroll Thumb
- Scroll Button
- Spinner (loading)
- Skeleton Screen
- Empty State
- Pagination
- Carousel
- Tree View
- Badge
- Progress Bar
- Chevron
- Kebab Menu
- Hamburger Menu

These terms are widely used across frameworks such as Bootstrap, Material UI, Ant Design, Fluent UI, Tailwind UI, and most design systems.