Aa

  1. A

    1. Accordion

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

    2. Action Sheet

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

    3. Avatar

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

  2. B

    1. Badge

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

    2. Banner

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

    3. 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.

    4. Button

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

  3. C

    1. Card

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

    2. Carousel

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

    3. Checkbox

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

    4. 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.

    5. Color Picker

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

    6. 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.

    7. Command Palette

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

    8. Context Menu

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

  4. D

    1. Date Picker

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

    2. 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.

    3. Divider

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

    4. 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.

    5. 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.

  5. F

    1. 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.

    2. 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.

    3. Full-screen Overlay

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

  6. E

    1. Empty State

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

    2. Error Message

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

  7. G

    1. Gallery

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

  8. H

    1. Hyperlink

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

  9. L

    1. 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.

    2. 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.

  10. M

    1. 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.

  11. N

    1. 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.

  12. P

    1. 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.

    2. Pagination

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

    3. Popover

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

    4. 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.

  13. R

    1. Radio Button

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

  14. S

    1. Search Bar

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

    2. 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.

    3. Select

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

    4. 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.

    5. Skeleton

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

    6. Slider

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

    7. 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.

    8. Status Dot

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

    9. Stepper

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

    10. Switch

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

  15. T

    1. Tab Bar

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

    2. 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.

    3. Table of Contents

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

    4. Text Area

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

    5. Text Field

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

    6. Tile

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

    7. Time Picker

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

    8. 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.

    9. 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.

    10. Tooltip

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

    11. 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.

    12. Tree

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