Skip to main content

UI Components

Inputs​

Autocomplete​

  • Functions to suggest relevant options based on user input

Button​

  • Clickable elements to trigger actions

Button Group​

  • Group of buttons to select a single option from multiple options

Calendar picker​

  • Allows users to select dates from a calendar view

Color picker​

  • Selects a color from a range of available colors

Checkbox​

  • Boolean input to select or deselect an option

Date picker​

  • Allows user to select a date from a calendar view

Date range picker​

  • Selects a range of dates from a calendar view

Dialogs​

  • Prompts user for input or confirms an action

Drag and drop​

  • Enables user to drag and drop elements within the UI
  • Displays a list of options when clicked

File explorer​

  • Allows users to navigate and manage files

File uploader​

  • Uploads files from the user's device

Floating Action Button​

  • Circular button to perform an action

Forms​

  • Collects user input data

Image cropper​

  • Allows user to crop image files

Inline Form​

  • Form elements that fit within the page's layout

Inline validation​

  • Checks input data as user types

Multi-select​

  • Allows user to select multiple options

Radio Group​

  • Group of radio buttons to select a single option from multiple options

Rating​

  • Rating feature to rate a product or service
  • Allows user to search for content

Search Filter​

  • Narrow down search results

Select​

  • Dropdown menu to select one or more options from a list

Slider​

  • Range slider to adjust values within a range

Switch​

  • Toggle switch to select a binary option

Text Field​

  • Input field to enter a single line of text

Time picker​

  • Selects a time from a dropdown

Transfer List​

  • List of elements to be moved between two lists

Toggle Button​

  • Toggleable button to select between two options

Data Display​

Avatar​

  • Profile images to represent users

Badge​

  • Small labels to represent the status of an item
  • Displays a series of images as a slideshow

Chip​

  • Compact element for representing information, options, or actions

Data Grid​

  • Displays data in a tabular format

Data tables​

  • Structured way of displaying data

Divider​

  • Line to separate content into distinct sections

Icons​

  • Symbolic representation of an action or item

Image galleries​

  • Displays a series of images

Image List​

  • Element to display a list of images

Material Icons​

  • Google's official icon set

Loading indicators​

  • Keeps user informed of the progress of a task

List​

  • Group of related items

Maps​

  • Displays a geographic area

Modals​

  • Popup window that contains content

Table​

  • Group of data arranged in columns and rows

Tooltip​

  • Short message to provide information when hovering

Typography​

  • Style and appearance of text on a page

Feedback​

Alerts​

  • Short messages to inform users of important events

Backdrop​

  • Overlay element to visually highlight the main content

Dialog​

  • Modal window to prompt users for a response

Notifications​

  • Alerts users of important events

Popovers​

  • Displays additional information when clicked

Progress​

  • Shows a user the progress of a task they are performing

Skeleton​

  • Placeholder to reduce the perceived wait time on a page

Snackbar​

  • Temporary message to inform users of the outcome of an action

Spinners​

  • Notifies user of an in-progress task

Surfaces​

Accordion​

  • Group of collapsible elements to show and hide information

App Bar​

  • Toolbar for navigation and controls

Card​

  • Element with a raised appearance to highlight a group of information

Paper​

  • Element to contain content in a raised, light-shadowed box

Bottom Navigation​

  • Navigation bar for switching between views
  • Small navigation element to show the path to the current page

Drawer​

  • Sidebar element to show navigation options

Hamburger menu​

  • Icon that reveals hidden navigation when clicked
  • Element to navigate to a different page
  • Element to show a list of choices

Pagination​

  • Tool to navigate between pages of a list

Speed Dial​

  • List of actions to quickly access a feature

Stepper​

  • Element to show steps in a process

Tabs​

  • Tool to switch between different views

Scrollycoding​

  • Tool to navigate between sections of a page with code examples

Layout​

Box​

  • Element to contain content with a border

Container​

  • Element to group and center content on the page

Grid​

  • Element to layout elements in a grid

Grid v2​

  • Element to layout elements in a grid with more customization

Hidden​

  • Element to hide content from view

Off-canvas navigation​

  • Reveals a hidden navigation menu when triggered

Pagination​

  • Divides large sets of data into multiple pages

Stack​

  • Element to layout elements in a stack

Timeline​

  • Displays a sequence of events

Tree Grid​

  • Element to layout a grid with a hierarchical structure

Tree View​

  • Element to display a hierarchical structure

Virtual List​

  • Displays a large list of data without loading it all at once

Virtual scrolling​

  • Loads data as the user scrolls the page

Misc​

Context Menu​

  • Accesses an additional set of options for a given element

Dividers​

  • Visually divides content into separate sections

Multi-level dropdown menu​

  • Displays nested sub-menus
  • Structure for navigating the UI
  • Header that remains visible at the top of the page

Tab bar​

  • Allows user to switch between multiple sections

Tag Input​

  • Enter multiple items in a single input field

Toolbar​

  • Quick access to common features

Tooltips​

  • Displays additional information when hovered over

Video players​

  • Plays video files

Wizard​

  • Step-by-step navigation through a process