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.