# Aa ## A [**Accordion**] What is an Accordion? Accordion is a vertical stack of collapsible containers that reveal or hide sections of content. [**Action Sheet**] What is an action sheet? Action Sheet is a specific style of menu that presents a set of actions or options. [**Avatar**] What is an Avatar? An avatar is a representation of a unique entity — like a person, a business, or an object. ## B [**Badge**] What is a Badge UI? Badges convey dynamic information, such as counts or status. A badge can include labels or numbers. [**Banner**] What is a Banner UI? A banner displays a prominent message and related actions. [**Bottom Sheet**] What is a Bottom Sheet? Bottom sheets display supplementary content anchored to the bottom of the screen. They provide temporarily important information that can be easily accessed and dismissed. [**Button**] What is a Button? Buttons help users take action, such as sending an email, sharing a document, or liking a comment. ## C [**Card**] What is a card? A card groups related content and actions into a visually distinct unit. [**Carousel**] What is a Carousel? Carousel is a horizontally scrollable layout that displays a series of items or elements. [**Checkbox**] What is a checkbox? A checkbox is an input control that allows a user to select one or more options. [**Chip**] What is a Chip? Chips are compact elements that represent an input, attribute, or action. Chips help users enter information, make selections, filter content, or trigger actions. [**Color Picker**] What is a color picker? A color picker allows users to select colors from a spectrum or palette. [**Combobox**] What is a Combobox? Combobox lets users quickly select from predefined options with an autocomplete input to filter options. Think of it as a searchable dropdown with a predefined list of options. [**Command Palette**] What is a Command Palette? A Command Palette provides quick access to many commands/functionalities within the app. [**Context Menu**] What is a context menu? Context Menu displays an action menu related to the element that the user right-clicks on. ## D [**Date Picker**] What is a date picker? A date picker lets users select a single date or a date range. [**Dialog**] What is a dialog? A dialog displays content (e.g. important prompts) that requires user interaction, in a layer above the page or screen. [**Divider**] What is a divider? A divider is a thin line that groups content in lists and containers. [**Drawer**] What is a Drawer? Drawer is a panel that enters from the edge of the screen to display supplementary content, it typically has a Hamburger Menu Icon (or navigation menu icon) to indicate its presence. [**Dropdown Menu**] What is a dropdown menu? A dropdown menu presents a list of actions, options, or links in a temporary surface. They provide navigation options and access to various features and functionalities of the app. ## E [**Empty State**] What is an empty state? An empty state occurs when there is no data to display to users. [**Error Message**] What is an error message? An error message pattern occurs when an app fails to complete an expected action. ## F [**File Uploader**] What is a Drop zone or File uploader? A drop zone lets users upload one or more files dragging and dropping, or activating a button. [**Floating Action Button**] What is a Floating Action Button? The Floating Action Button represents the primary action on a screen. It's designed to provide quick access to the most important function of an app, persistently floating above other components for easy reach. [**Full-screen Overlay**] What is a Full-screen Overlay? Full-Screen Overlay is an overlay that fills the entire screen to display supplementary content. ## G [**Gallery**] What is a gallery? A gallery displays a collection of items (e.g. images, cards, etc) in an organised grid. ## H [**Hyperlink**] What is a hyperlink? A hyperlink allows users to navigate from one location to another. ## L [**Launch Screen**] What is a launch screen? A launch screen (commonly also known as a splash screen) is the first screen users see when they launch their app. It appears instantly when the app launches and is quickly replaced with the app's first screen. [**Loading indicator**] What is a loading indicator? A loading indicator is an animated spinning or dot icon that lets users know content is being loaded. ## M [**Map Pin**] What is a Map pin? A Map pin represents a specific point or location on a map. It is used to indicate a point of interest or to mark a particular destination. [**MCP (Model Context Protocol)**] What is MCP? MCP examples, how do MCP servers work, and how to use MCP with design tools like Claude and Cursor. The designer's guide to MCP in AI. ## N [**Navigation Menu**] What is a Navigation Menu? A Navigation Menu displays the primary navigation links in a drawer-styled overlay. It is a fly-out multi-column menu from the top navigation bar. ## P [**Page Control**] What is a page control? A page control displays a row of indicator dots, each of which represents a page in a flat list. [**Pagination**] What is a Pagination? Pagination allows users to navigate between pages of content. [**Popover**] What is a Popover? Popover displays information and functions temporarily in a contextual overlay that floats around its trigger (i.e. a button). [**Progress Indicator**] What is a Progress Indicator? Progress indicators inform users about the status of ongoing processes by providing visual feedback about the progress of a task or operation. ## R [**Radio Button**] What is a Radio Button? Radio Buttons let users select a single option from a list of predefined options. ## S [**Search Bar**] What is a Search Bar? Search bar allows users to enter a keyword or phrase and get relevant information. [**Segmented Control**] What is a Segmented Control? Segmented Control is a toggle that either allows users to navigate between views, or, select options. It's primary use case is to organise content. [**Select**] What is Select? Select allows users to choose from multiple options from a dropdown menu list. [**Sidebar**] What is a sidebar? A sidebar makes it easy for users to navigate an app's features or sections. It may also include extra content or actions to help with tasks. [**Skeleton**] What is a Skeleton loading indicator? Skeleton screen displays a placeholder preview of your content while the actual content is being loaded. [**Slider**] What is a Slider? Sliders allow users to make selections from a range of values. [**Stacked List**] What is a Stacked List? Stacked List displays a group of related content in a vertical list - it usually includes text and images. [**Status Dot**] What is a Status Dot? Status Dot is a small, circular indicator that conveys notifications or status information. [**Stepper**] What is a Stepper? A stepper is a two-segment control that people use to increase or decrease an incremental value. [**Switch**] What is a Switch? A switch allows users to toggle the state of a single item on or off. ## T [**Tab Bar**] What is a Tab Bar? Tab Bar is the bottom navigation that provides access to top-level destinations. [**Table**] What is a Table? Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data. [**Table of Contents**] What is a Table of Contents? Table of Contents lets users quickly navigate to a particular section of the page content. [**Text Area**] What is a Text area? Text area allows users to enter multiple lines of text. [**Text Field**] What is a Text field? Text fields allow users to enter text into a UI. [**Tile**] What is a tile? A tile allows users to select single or multiple items from a list or grid. [**Time Picker**] What is a Time picker? Time pickers help users select and set a specific time, or a range of times. [**Toast**] What is a Toast? Toasts display brief, temporary messages. They're meant to be noticed without disrupting a user's attention, and it should automatically disappear afterwards. [**Toolbar**] What is a Toolbar? A Toolbar provides a set of actions or tools that are relevant to the user's current task or view. [**Tooltip**] What are Tooltips? A Tooltip display informative text labels that provide contextual support, usually on hover, but sometimes on click or tap. [**Top Navigation Bar**] What is a Top Navigation Bar? Top Navigation Bar is the header component at the top of the screen that provides navigation and actions. [**Tree**] What is a Tree? A tree visualizes the hierarchical structure of nodes / nested items.