Skip to main content

UI glossary

Definitions, anatomy and real examples for 72 UI components and page sections, drawn from the 20,000+ designs in the Kombai gallery.

  • Accordion

    What is an accordion? A vertical stack of headers that each expand to show or hide a section of content. It is common for FAQs, product details and settings, where people only need one or two sections and the rest can stay folded away.

  • Action sheet

    What is an action sheet? A menu of actions that rises from the bottom of a mobile screen after a tap. It is a mobile pattern for actions on the current item, like share, save or delete, with a separate Cancel button at the bottom.

  • Announcement banner

    What is an announcement banner? A slim strip at the top of a page that carries one timely message and a link. Sites use it for launches, sales and important notices, and it can usually be dismissed so it does not get in the way on every visit.

  • Avatar

    What is an avatar? A small image, initials or icon that stands for a person, team or account. Avatars appear in comments, chat, team lists and account menus, and fall back to initials or an icon when there is no photo.

  • Badge

    What is a badge? A small label or count attached to an item, like an unread number or a New tag. Badges sit on icons, avatars, tabs or list rows and draw attention to something new or counted without opening anything.

  • Bento grid

    What is a bento grid? A grid of unequal tiles that packs several messages into one composed section. Landing pages use it to show features, stats and visuals together, with one large tile drawing the eye and smaller tiles around it.

  • Bottom sheet

    What is a bottom sheet? A panel anchored to the bottom of the screen that holds extra content or actions. It sits within thumb reach on phones and can often be dragged taller, which makes it a common home for filters, options and details.

  • Breadcrumb

    What is a breadcrumb? A trail of links that shows where a page sits in the site's hierarchy. Each step links back to a parent page, which helps people on deep pages in shops, docs and file systems find their way up.

  • Button

    What is a button? A control people press to run an action, like saving, sending or buying. Its label names the result, and its style shows weight: a filled primary button for the main action, quieter outline or text buttons for the rest.

  • Calendar

    What is a calendar? A month, week or day view that places events on a grid of dates. Scheduling and booking apps use it to show availability and events, often with color for different calendars or event types.

  • Card

    What is a card? A contained block that groups related content and actions about one thing. Cards are used in grids and feeds for products, articles and profiles, and the whole card is often one link to the full item.

  • Carousel

    What is a carousel? A horizontal row of items people swipe or click through one at a time. It saves vertical space for related items like products, photos or testimonials, with arrows, dots or a peek of the next item.

  • Charts

    What are charts? Visual representations of data, like line, bar and donut charts. Dashboards and reports use them to show trends, comparisons and parts of a whole faster than a table of numbers can.

  • Checkbox

    What is a checkbox? A box people tick to pick any number of options from a list. Each box works on its own, so people can tick several at once, and a single checkbox often confirms a choice like accepting terms.

  • Coach marks

    What are coach marks? Highlights and tips placed over the interface to walk new users through features. They point at real controls one step at a time during onboarding, and always offer a way to skip or come back later.

  • Code snippet

    What is a code snippet? A block of formatted code with highlighting and usually a copy button. Docs and developer tools use it for examples people copy, often with tabs for different languages and line numbers for reference.

  • Color picker

    What is a color picker? A control for choosing a color from a spectrum, swatches or a hex value. Design tools and theme settings use it, often with preset swatches for brand colors next to a full spectrum and a field for the exact value.

  • Combobox

    What is a combobox? A text field with a list of options that narrows as people type. It helps when the list is too long to scroll, like cities or contacts, and can accept typed values that are not in the list.

  • Command palette

    What is a command palette? A keyboard-first search box that finds and runs any page or action in an app. It usually opens with Cmd or Ctrl plus K and lets experienced users jump anywhere or run commands without touching the mouse.

  • Context menu

    What is a context menu? A menu of actions for the item people right-click or long-press. Its actions depend on what was clicked, like Rename or Delete for a file, so it keeps the interface clean until it is needed.

  • CTA band

    What is a CTA band? A full-width strip near the end of a page with one headline and a call to action. It repeats the page's main action after people have read the pitch, often on a contrasting background so it stands out.

  • Date picker

    What is a date picker? A calendar control for choosing one date or a date range. It pairs a text field with a calendar popup, and good ones block invalid dates, show today and make range selection easy.

  • Dialog

    What is a dialog? A window above the page that asks for a decision or input before people continue. It blocks the page behind it until people respond, so it is kept for confirmations, short forms and decisions that cannot wait.

  • Drawer

    What is a drawer? A panel that slides in from the edge of the screen with extra content or navigation. Drawers hold navigation on mobile or details and filters on desktop, and close by swiping back, clicking outside or pressing Escape.

  • Dropdown menu

    What is a dropdown menu? A list of actions or options that opens from a button and closes after a choice. It keeps secondary actions out of the way, behind a button like More or a user avatar, until someone asks for them.

  • Empty state

    What is an empty state? What a screen shows when there is no content yet, usually with a next step. A good one explains why the screen is empty and offers the first action, like creating a project or importing data.

  • Error message

    What is an error message? A message that explains what went wrong and how to fix it. It appears next to the problem, like under a form field or in place of failed content, and uses plain words instead of error codes.

  • FAQ section

    What is an FAQ section? A list of common questions with their answers, often as an accordion. It sits near the end of landing and pricing pages and answers the doubts that stop people from signing up or buying.

  • Feature section

    What is a feature section? A section that explains what a product does, usually with icons, screenshots or splits. It sits below the hero on landing pages and breaks the product into a few key benefits, each with a short headline and visual.

  • File upload

    What is a file upload? An area people drop files onto or click to browse for files to send. A good one states which file types and sizes it accepts, shows progress for each file and lets people remove a file before sending.

  • Filter chips

    What are filter chips? Small pill buttons that narrow a list to what matches each selected filter. Each chip toggles on its own, so people can combine filters, see what is applied at a glance and clear one with a single tap.

  • Floating action button

    What is a floating action button? A round button that floats above the content and runs the screen's main action. It is common on mobile, sits in a bottom corner above the content and is reserved for one primary action like compose or add.

  • Footer

    What is a footer? The bottom of every page, with secondary links, legal text and social links. It is the safety net of a site, where people look for contact details, policies and pages that did not fit in the main navigation.

  • Form

    What is a form? A group of fields and controls that collects information and submits it together. Forms group related fields under clear labels, validate as people go and end with one primary button that sends everything at once.

  • Full screen overlay

    What is a full screen overlay? A layer that covers the whole screen to focus people on one task or piece of content. It is used for search, media viewers and immersive flows, and needs an obvious way to close and get back to where people were.

  • Gallery

    What is a gallery? A grid of images or cards that people browse and open. It suits visual content like photos, portfolios and products, usually opening each item in a larger view or lightbox.

  • Hero section

    What is a hero section? The first section of a page, with the main headline, a short pitch and a call to action. It is the first thing visitors see, so it states what the product is and why it matters, usually with a product image or demo.

  • How it works

    What is a how it works section? A section that explains a product in a few numbered steps. It turns a product into three or four simple stages, often with icons or screenshots, so people see how easy it is to start.

  • Kanban board

    What is a kanban board? Columns of cards that people drag between stages of a workflow. Teams use it to track tasks from to do through done, where each column is a stage and each card is one piece of work.

  • Loading indicator

    What is a loading indicator? A spinner, bar or animation that shows content is on its way. It reassures people that something is happening during short waits, and switches to a progress bar when the wait can be measured.

  • Logo cloud

    What is a logo cloud? A row or grid of customer logos that signals who already uses a product. It usually sits near the top of a landing page as quick social proof, often in grayscale so the logos do not compete with the content.

  • Map

    What is a map? An interactive map that shows places, routes or areas with pins and overlays. It shows locations for stores, rentals, deliveries and routes, often next to a list of results that stays in sync with it.

  • Mega menu

    What is a mega menu? A large dropdown panel that shows many grouped links at once from the main navigation. Large sites like stores and SaaS products use it to show whole categories at once, often with headings, icons and a featured promo.

  • Navbar

    What is a navbar? The bar at the top of a site or app that holds the logo, main links and account actions. It stays the same on every page so people can always get home, and on small screens its links usually collapse into a menu button.

  • Newsletter signup

    What is a newsletter signup? A short form that asks for an email address to subscribe to updates. It appears in footers, blog posts and popups, and works best with one field, a clear promise and a note on how often emails go out.

  • Pagination

    What is a pagination? Numbered links that split a long list into pages people move between. It suits results people want to come back to or share, since each page has its own position, unlike infinite scroll.

  • Popover

    What is a popover? A small floating panel that opens next to the element that triggered it. Unlike a tooltip it can hold links, buttons or small forms, and it closes when people click outside it or press Escape.

  • Pricing table

    What is a pricing table? Side-by-side plans with prices and features so people can compare and choose. It usually shows two to four plans in columns, highlights the recommended one and often has a monthly or yearly toggle.

  • Progress indicator

    What is a progress indicator? A bar, ring or step count that shows how far along a task is. It shows determinate progress when the end is known, like an upload percentage or step 2 of 4, so people know how long is left.

  • Radio button

    What is a radio button? A round control for picking exactly one option from a short list. Choosing one option clears the others in the group, which makes radio buttons the standard for short sets of mutually exclusive choices in forms.

  • Search bar

    What is a search bar? A field where people type words to find content, usually with a search icon. It usually sits at the top of a page or list, suggests results as people type and offers a quick way to clear the query.

  • Segmented control

    What is a segmented control? A row of joined buttons where one segment is selected at a time, used to switch views or values. All the options stay visible side by side, so it works for two to five choices like Day, Week and Month, or switching between list and grid views.

  • Select

    What is a select? A form field that opens a list of options and shows the one people pick. Selects keep long option lists compact in forms, like country or language, and work best when people already know the option they want.

  • Side navigation

    What is a side navigation? A vertical panel of links along the edge of an app that moves people between its sections. Dashboards and admin tools use it for their main sections, and it often collapses to icons to give the content more room.

  • Skeleton loader

    What is a skeleton loader? Gray placeholder shapes that stand in for content while it loads. It mirrors the layout that is coming, so the page feels faster and does not jump around when the real content arrives.

  • Slider

    What is a slider? A handle dragged along a track to pick a value or a range. It works best when the exact number matters less than the feel, like volume, price ranges or brush size, and often pairs with a value label.

  • Splash screen

    What is a splash screen? The first screen an app shows while it starts, usually just the brand's mark. It covers the moment an app is loading, and is best kept short and simple so it does not delay people from getting started.

  • Stacked list

    What is a stacked list? A vertical list of rows, each with the same layout of text, images or actions. It is the default way to show items like messages, contacts or settings on mobile, often with an avatar, two lines of text and an action.

  • Stats section

    What is a stats section? A section of large numbers that sums up results or scale at a glance. Landing pages use it for proof like users, uptime or revenue saved, each number paired with a short label that explains it.

  • Status indicator

    What is a status indicator? A small dot, badge or icon that shows the state of an item, like online or unread. It is common in chat, team lists and dashboards, and works best when it pairs color with a shape or label for people who cannot see color.

  • Stepper

    What is a stepper? A pair of minus and plus buttons that change a number one step at a time. Steppers suit small counts that change by a fixed amount, like quantity in a cart or guests in a booking, and usually show the current value between the buttons.

  • Table

    What is a table? Rows and columns of data that people can scan, compare and act on. Tables suit records with the same fields, like orders or users, and often add sorting, filters, row selection and pagination.

  • Tabs

    What are tabs? A row of labels that switches between views of related content on the same page. Only one tab's content shows at a time, which keeps peer sections like Overview, Activity and Settings on one page without long scrolling.

  • Testimonials

    What are testimonials? Quotes from customers, with names and faces, that back up what a page claims. They appear as cards, sliders or walls of quotes, and work best when each quote is specific and tied to a real person and company.

  • Text area

    What is a text area? A multi-line box for longer text, like a message or a description. It grows or scrolls as people write, and it often shows a character count or limit when the text has to fit somewhere specific.

  • Text field

    What is a text field? A single-line box for typing text, like a name or an email address. It carries a label, an optional hint and an error message, and its keyboard and autofill hints can change with the type of data it expects.

  • Time picker

    What is a time picker? A control for choosing a time of day, or a start and end time. It can be a wheel, a dropdown of time slots or a clock face, and it should respect the person's 12 or 24 hour format and time zone.

  • Timeline

    What is a timeline? Events or milestones laid out in order along a line. It shows order history, project milestones, activity logs and company stories, usually with a date on every entry.

  • Toast notification

    What is a toast notification? A brief message that pops up to confirm something happened, then disappears on its own. It appears at the edge of the screen without blocking work, and often includes an Undo link for actions like deleting or archiving.

  • Toggle switch

    What is a toggle switch? A control that turns one setting on or off, and the change takes effect right away. It suits settings like notifications or dark mode, where each option has a clear on and off and there is no Save button to press.

  • Tooltip

    What is a tooltip? A short text label that appears when people hover over or focus an element. It explains icon-only buttons and unfamiliar terms in a few words, and should never hold anything people need to click.

  • Tree

    What is a tree? A nested list that expands and collapses to show items inside other items. File browsers, page outlines and org charts use it, with arrows or indentation showing which items hold others.