Buttons

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
Link

Contained Button
Link

Contained Button
Link

Outlined Button
Link

Linear Progress

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 indicators display how long an operation will take.
  • Indeterminate indicators visualize an unspecified wait time.

Determinate
Indeterminate
Buffer
Reversed
Indeterminate Reversed
Buffer Reversed
Custom Colors with Buffer

Cards

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
Brown Bear

Our Changing Planet

by Kurt Wagner

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem omnis veritatis deleniti assumenda iusto vel rem eveniet molestias sapiente recusandae impedit soluta, officia officiis alias quaerat beatae, nemo laboriosam aut?

Tabs

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.


Checkbox

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

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

Text field

Input field with hints and placeholder

Text Field - Leading/Trailing icons

event
delete

Password field with validation

Must be at least 8 characters long

Text Field and Textarea


Radio

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.

Select

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

It functions analogously to the browser’s native select element, 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.

Slider

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 sliders allow users to select a value along a subjective range. They do not require a specific value to make adjustments.
  • Discrete sliders allow users to select a specific value from a range.

Continuous Slider

Discrete Slider

20

Discrete Slider with Tick Marks

20
settings