Aa

What is an Accordion? Accordion is a vertical stack of collapsible containers that reveal or hide sections of content.

What is an action sheet? Action Sheet is a specific style of menu that presents a set of actions or options.

What is an Avatar? An avatar is a representation of a unique entity — like a person, a business, or an object.

What is a Badge UI? Badges convey dynamic information, such as counts or status. A badge can include labels or numbers.

What is a Banner UI? A banner displays a prominent message and related actions.

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.

What is a Button? Buttons help users take action, such as sending an email, sharing a document, or liking a comment.

What is a card? A card groups related content and actions into a visually distinct unit.

What is a Carousel? Carousel is a horizontally scrollable layout that displays a series of items or elements.

What is a checkbox? A checkbox is an input control that allows a user to select one or more options.

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.

What is a color picker? A color picker allows users to select colors from a spectrum or palette.

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.

What is a Command Palette? A Command Palette provides quick access to many commands/functionalities within the app.

What is a context menu? Context Menu displays an action menu related to the element that the user right-clicks on.

What is a date picker? A date picker lets users select a single date or a date range.

What is a dialog? A dialog displays content (e.g. important prompts) that requires user interaction, in a layer above the page or screen.

What is a divider? A divider is a thin line that groups content in lists and containers.

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.

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.

What is an empty state? An empty state occurs when there is no data to display to users.

What is an error message? An error message pattern occurs when an app fails to complete an expected action.

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.

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.

What is a Full-screen Overlay? Full-Screen Overlay is an overlay that fills the entire screen to display supplementary content.

What is a gallery? A gallery displays a collection of items (e.g. images, cards, etc) in an organised grid.

What is a hyperlink? A hyperlink allows users to navigate from one location to another.

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.

What is a loading indicator? A loading indicator is an animated spinning or dot icon that lets users know content is being loaded.

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.

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.

What is a page control? A page control displays a row of indicator dots, each of which represents a page in a flat list.

What is a Pagination? Pagination allows users to navigate between pages of content.

What is a Popover? Popover displays information and functions temporarily in a contextual overlay that floats around its trigger (i.e. a button).

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.

What is a Radio Button? Radio Buttons let users select a single option from a list of predefined options.

What is a Search Bar? Search bar allows users to enter a keyword or phrase and get relevant information.

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.

What is Select? Select allows users to choose from multiple options from a dropdown menu list.

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.

What is a Skeleton loading indicator? Skeleton screen displays a placeholder preview of your content while the actual content is being loaded.

What is a Slider? Sliders allow users to make selections from a range of values.

What is a Stacked List? Stacked List displays a group of related content in a vertical list - it usually includes text and images.

What is a Status Dot? Status Dot is a small, circular indicator that conveys notifications or status information.

What is a Stepper? A stepper is a two-segment control that people use to increase or decrease an incremental value.

What is a Switch? A switch allows users to toggle the state of a single item on or off.

What is a Tab Bar? Tab Bar is the bottom navigation that provides access to top-level destinations.

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.

What is a Table of Contents? Table of Contents lets users quickly navigate to a particular section of the page content.

What is a Text area? Text area allows users to enter multiple lines of text.

What is a Text field? Text fields allow users to enter text into a UI.

What is a tile? A tile allows users to select single or multiple items from a list or grid.

What is a Time picker? Time pickers help users select and set a specific time, or a range of times.

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.

What is a Toolbar? A Toolbar provides a set of actions or tools that are relevant to the user's current task or view.

What are Tooltips? A Tooltip display informative text labels that provide contextual support, usually on hover, but sometimes on click or tap.

What is a Top Navigation Bar? Top Navigation Bar is the header component at the top of the screen that provides navigation and actions.

What is a Tree? A tree visualizes the hierarchical structure of nodes / nested items.