Buttons allow users to take actions, and make choices, with a single tap.

Material buttons trigger an ink reaction on press. They may display text, imagery, or both. There are four standard types of buttons:

• Text button (low emphasis):Text buttons are typically used for less important actions.
• Outlined Button (medium emphasis):Outlined buttons are used for more emphasis than text buttons due to the stroke.
• Contained button (high emphasis):Contained buttons have more emphasis, as they use use a color fill and shadow.
• Toggle button:Toggle buttons group a set of actions using layout and spacing. They’re used less often than other button type.

Text Button

BaselineDenseSecondaryfavorite IconSVG IconLink

Contained Button

BaselineDenseSecondaryfavorite IconSVG IconLink

Contained Button

BaselineCompactDenseSecondaryfavorite IconLink

Outlined Button

BaselineCompactDenseSecondaryfavorite IconLink

Progress and activity indicators are visual indications of an app loading content.

A single visual indicator should be used to represent each type of operation. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.

• Determinate indicatorsdisplay how long an operation will take.
• Indeterminate indicatorsvisualize an unspecified wait time.

A card is a sheet of material that serves as an entry point to more detailed information.

Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.

Use a card layout when displaying content that:

• As a collection, comprises multiple data types, such as images, movies, and text
• Does not require direct comparison (a user is not directly comparing images or text)
• Supports content of highly variable length, such as comments
• Contains interactive content, such as +1 buttons or comments
• Would otherwise be in a grid list but needs to display more content to supplement the image

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.

Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.

Because swipe gestures are used for navigating between tabs, don't pair tabs with content that also supports swiping.

Checkboxes allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.

The MDC Checkbox component is a spec-aligned checkbox component adhering to the Material Design checkbox requirements. It works without JavaScript with basic functionality for all states. If you use the JavaScript object for a checkbox, it will add more intricate animation effects when switching between states.

Inputs typically reside in forms but can appear in other places, like dialog boxes and search.

The following input types can be used:

• date
• datetime-local
• email
• month
• number
• password
• search
• tel
• text
• time
• url
• week

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Otherwise, consider a dropdown, which uses less space than displaying all options.

MDC Select provides Material Design single-option and multi-option select menus.

It functions analogously to the browser’s native selectelement, and includes a gracefully degraded version that can be used in conjunction with the browser’s native element.

Both are fully accessible, and fully RTL-aware.

Sliders are ideal components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation.

Sliders may have icons on both ends of the bar that reflect the value intensity. Place the smallest value for the slider range on the left and the largest value on the right.

• Continuous slidersallow users to select a value along a subjective range. They do not require a specific value to make adjustments.
• Discrete slidersallow users to select a specific value from a range.

Continuous Slider

Discrete Slider

Discrete Slider with Tick Marks