The Badge component is a visual indicator for numeric values such as tallies and scores.

Badge

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.

Button

Cards are used to group information about subjects and their related actions. Cards can include images, text, buttons, links, and data visualizations.

Card

Carousels are for displaying a related set of content items in a row. Items can be paged using the next/previous buttons or by a swipe gesture.

Carousel

Checkbox are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

Checkbox

A Date Picker is a text input to capture a date. You can select a single date, date range or date and time.

Date Picker

Useful for displaying a visual separator between parts of content. Used to divide sections of an article or to divide inline text and links, such as the operation column of a table.

Divider

This component presents a list of options that take immediate action or navigate the user outside of the current context. It can be thought of as a collection of links or buttons.

Progress Bar

Use Radio to select a single option from a list. Radio should be used instead of checkboxes if only one item can be selected from a list.

Radio

Search enables users to specify a word or a phrase to find relevant pieces of content or filter a long list of elements. Commonly represented as a Text Input with a little magnifying glass inside of it.

Search

Sliders provide a visual indication of adjustable content, where the user can increase or decrease the value by moving the handle along a horizontal track.

Slider

A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Use a Spinner when the content to be loaded is unknown or unpredictable.

Spinner

Switch represents a physical switch that allows users to turn things on or off, where choosing an option results in an immediate action.

Switch

Table is a container for displaying data efficiently. Usually, it allows users to sort, search, paginate, filter data, and take action on large amounts of data.

A text input is a field that allows a user to write or edit text.

Text Input

Toasts are shown as a floating box typically in the top right of the page. They can optionally be displayed on other edges of the screen (top-left, bottom-left, etc). Toasts provide limited space for content, and therefore the content must be short and concise, providing immediate feedback in response to a user action or informing users of a process that the app has performed or will perform.

Toast

A toggle button allows a user to pick between 2 states, selected and deselected, such as making an item as a favorite.

Toggle Button

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.

Tooltip

Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3.

Material Design