Components

Button

actions

Buttons communicate actions that users can take. They help users interact with and take action on content.

4 props 5 variants

Card

containment

Cards contain content and actions about a single subject. They are surfaces that display content and actions on a single topic.

3 props 3 variants

Checkbox

selection

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

6 props

Chips

actions

Chips help people enter information, make selections, filter content, or trigger actions. They are compact elements representing inputs, attributes, or actions.

7 props 4 variants

Dialog

containment

Dialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task.

5 props 3 variants

Divider

containment

Dividers are thin lines that group content in lists and containers, or separate content into sections.

3 props 3 variants

Floating Action Button

actions

FABs represent the most important action on a screen. They put key actions within reach and are used for high-emphasis, primary actions.

4 props 5 variants

Icon

communication

Icons communicate meaning through visual symbols. Material Symbols provide a set of over 2,500 glyphs in variable font format.

5 props 3 variants

Icon Button

actions

Icon buttons help people take supplementary actions with a single tap. They display an icon without a text label.

9 props 4 variants

List

containment

Lists are continuous, vertical indexes of text and images. They display related content in a consistent format.

1 props 3 variants

Menu

navigation

Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

10 props 3 variants

Navigation Bar

navigation

Navigation bars let people switch between UI views on smaller devices. They are fixed to the bottom of the screen.

1 props

Navigation Drawer

navigation

Navigation drawers let people switch between UI views on larger devices. They are permanent, standard, or modal surfaces containing navigation destinations.

3 props 2 variants

Navigation Rail

navigation

Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.

1 props

Progress Indicator

communication

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

6 props 2 variants

Radio Button

selection

Radio buttons let people select one option from a set of options. Only one radio can be selected in a group at a time.

5 props

Select

input

Select menus display a list of choices in a dropdown, allowing users to make a single selection from the options.

10 props 2 variants

Slider

input

Sliders allow users to view and select a value or range along a track. They are ideal for adjusting settings like volume, brightness, or applying filters.

11 props 3 variants

Snackbar

communication

Snackbars provide brief messages about app processes at the bottom of the screen. They automatically disappear after a timeout.

6 props 3 variants

Switch

selection

Switches toggle the state of an item on or off. They are used for binary settings that take effect immediately.

7 props

Tabs

navigation

Tabs organize groups of related content that are at the same level of hierarchy. They enable navigation between different views.

3 props 2 variants

Text Field

input

Text fields let users enter and edit text. They provide a container with labels for user input.

18 props 2 variants

Top App Bar

navigation

Top app bars display navigation, actions, and text at the top of the screen. They provide content and actions related to the current screen.

3 props 4 variants