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. 3. Buttons & Actions 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. 4. Input Controls 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. 8. Scroll & Viewport 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: 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.