New buttons have updated shape, typography, and color mappings, dynamic color compatibility, and 3 additional types (elevated, filled, and filled tonal)—replacing the contained button.
- open_in_new
Buttons in Material Design 3
Interactive demo
This demo lets you preview the button component, its variations, and configuration options. Each tab displays a different type of button.
Usage
Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
- Dialogs
- Modal windows
- Forms
- Cards
- Toolbars
Principles
Identifiable
Buttons should indicate that they can trigger an action.
Findable
Buttons should be easy to find among other elements, including other buttons.
Clear
A button’s action and state should be clear.
Types
There are text, contained, and toggle buttons.
Anatomy
Buttons contain one required element and four optional elements.
Text label
Text buttons and contained buttons use text labels, which describe the action that will occur if a user taps a button. If a text label...
Text buttons and contained buttons use text labels, which describe the action that will occur if a user taps a button. If a text label is not used, an icon should be present to signify what the button does.
By default Material uses capitalized button text labels (for languages that have capitalization). This is to distinguish the text label from surrounding text. If a text button does not use capitalization for button text, find another characteristic to distinguish it such as color, size, or placement.
Hierarchy and placement
Hierarchy
A layout should contain a single prominent button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands...
A single, prominent button
A layout should contain a single prominent button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.
Other buttons
An app can show more than one button in a layout at a time, so a high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. When using multiple buttons, ensure the available state of one button doesn’t look like the disabled state of another.
Placement
Multiple button types can be used to express different emphasis levels. A floating action button (FAB) represents the primary action for a screen. Related Article...
Multiple button types can be used to express different emphasis levels.
Behavior
Scaling and adaptation
When scaling layouts for large screen devices, buttons can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.
When scaling layouts for large screen devices, buttons can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.
Container properties
Buttons are typically placed in containers such as cards or dialogs. As a parent container scales to adapt to different screen sizes, a button’s size, position, and alignment within the container can also change.
Buttons can be aligned left, right, or center as the parent container scales.
A button’s position and size should scale in relationship to its container.
Arrangement
Define the position and alignment of button elements such as text and icons in relationship to their container. For example, the icon and text label within a button remain centered and anchored to each other as the button width scales.
The size and placement of buttons can change as parent containers, such as cards, adapt for larger screens.
Text button
Usage
Text buttons are typically used for less-pronounced actions, including those located: In cards, text buttons help maintain an emphasis on card content. A button’s text...
Text buttons are typically used for less-pronounced actions, including those located:
- In dialogs
- In cards
In cards, text buttons help maintain an emphasis on card content.
Text label
A button’s text label is the most important element on a button, as it communicates the action that will be performed when the user touches it.
Placement
Text buttons are often embedded in contained components like cards and dialogs, in order to relate themselves to the component in which they appear. Because...
Text buttons are often embedded in contained components like cards and dialogs, in order to relate themselves to the component in which they appear. Because text buttons don’t have a container, they don’t distract from nearby content.
States
Text buttons can be placed in front of a variety of backgrounds. Until the button is interacted with, its container isn’t visible. To maintain accessibility,...
Text buttons can be placed in front of a variety of backgrounds. Until the button is interacted with, its container isn’t visible.
To maintain accessibility, Material Design provides baseline opacity values for the color overlays used by states. A brand can adjust opacity values to suit its color scheme.
Outlined button
Usage
Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. Outlined buttons are also a lower...
Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.
Alternatives
Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.
Container
Outlined buttons display a stroke around a text label. Stroke can be represented in different ways: In a resting state, outlined buttons should display containment...
Outlined buttons display a stroke around a text label. Stroke can be represented in different ways:
- Set a button’s width to be the size of the text label, with 16dp padding on the left and right
- Set the button’s relative position to the responsive layout grid
In a resting state, outlined buttons should display containment with a stroke and no fill.
States
Outlined buttons can be placed on top of a variety of backgrounds. Its container is transparent and until the button is interacted with, a color...
Outlined buttons can be placed on top of a variety of backgrounds. Its container is transparent and until the button is interacted with, a color isn’t visible.
To maintain accessibility, Material Design provides baseline opacity values for the color overlays used by states. A brand can adjust opacity values to suit its color scheme.
Contained button
Usage
Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.
Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.
Container
Contained buttons display a container around a text label. Containers can be represented in different ways: Contained buttons should display containers with a solid color....
Contained buttons display a container around a text label. Containers can be represented in different ways:
- Set container width to the size of the text label with 16dp padding on the left and right
- Set the container’s relative position to the
responsive layout grid
Contained buttons should display containers with a solid color.
Button container width can be set according to the responsive layout grid.
Icon
Contained buttons can place icons next to text labels to both clarify an action and call attention to a button.
Contained buttons can place icons next to text labels to both clarify an action and call attention to a button.
Shadow & elevation
Buttons at higher elevations typically appear more prominent in a design. On press, elevated buttons lift up and the container displays touch feedback.
Buttons at higher elevations typically appear more prominent in a design. On press, elevated buttons lift up and the container displays touch feedback.
States
Recommended opacity values for button container fill colors can be found in the states guidelines. An app can alter the overlay values of the button...
Recommended opacity values for button container fill colors can be found in the
Toggle button
Usage
Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container. Only one...
Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.
Selected action
Only one option in a group of toggle buttons can be selected and active at a time. Selecting one option deselects any other.
States
A toggle button’s state makes it clear which button is active. Hover and focus states express the available selection options for buttons in a toggle...
Active and available toggle buttons
A toggle button’s state makes it clear which button is active. Hover and focus states express the available selection options for buttons in a toggle group.
Disabled toggle buttons
Toggle buttons that cannot be selected can either be given a disabled state, or be hidden.
Theming
Crane Material theme
This travel app’s buttons have been customized using Material Theming. Areas of customization include color, typography, and shape. Crane is a travel app that uses...
This travel app’s buttons have been customized using Material Theming. Areas of customization include color, typography, and shape.
Color
Crane’s buttons use custom color on two elements: the container and text.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Primary | Color Opacity |
#5C1349 100% |
Text | On Primary | Color Opacity |
#FFFFFF 100% |
Typography
Crane’s buttons use custom typography for the button text.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Button | Typeface Font Size Case |
Raleway SemiBold 14 All caps |
Shape
Crane’s button containers have custom corner shapes, with a 50% corner radius. *Crane buttons are in the small component shape category, and they use a custom size.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Override* | Family Size |
Rounded 50% |
Fortnightly Material theme
This news app’s buttons have been customized using Material Theming. Areas of customization include color and typography. Fortnightly is a news app that uses Material...
This news app’s buttons have been customized using Material Theming. Areas of customization include color and typography.
Color
Fortnightly’s buttons use custom color on two elements: background and text.
Element | Category | Attribute | Value |
---|---|---|---|
Background | Background | Color Opacity |
#FFFFFF 100% |
Text | Primary | Color Opacity |
#661FFF 100% |
Typography
Fortnightly’s buttons use custom typography for the button text.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Button | Typeface Font Size Case |
Libre Franklin ExtraBold 14 Sentence case |
Rally Material theme
This personal finance app’s buttons have been customized using Material Theming. Areas of customization include color and typography. Rally is a personal finance app that...
This personal finance app’s buttons have been customized using Material Theming. Areas of customization include color and typography.
Color
Rally’s buttons use custom color on two elements: background and text.
Element | Category | Attribute | Value |
---|---|---|---|
Background | Surface | Color Opacity |
#3C3C46 100% |
Text | Primary | Color Opacity |
#FFFFFF 100% |
Typography
Rally’s buttons use custom typography for the button text.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Button | Typeface Font Size Case |
Roboto Condensed Bold 14 All caps |
Posivibes Material theme
This social media app’s buttons have been customized using Material Theming. Areas of customization include color, typography, and shape. The Material Design color system can...
This social media app’s buttons have been customized using Material Theming. Areas of customization include color, typography, and shape.
Color
Posivibe’s buttons use custom color on two elements: the container stroke and text.
Element | Category | Attribute | Value |
---|---|---|---|
Container stroke | Secondary | Color Opacity |
#000000 100% |
Text | Primary | Color Opacity |
#000000 100% |
Typography
Posivibe’s buttons use custom typography for the button text.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Button | Typeface Font Size Case |
Roboto Condensed Bold 14 All caps |
Shape
Posivibe’s button containers have custom corner shapes, with 0dp long cut corners.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Small component | Family Size |
Cut 0;0;0;0dp |
Reply Material theme
This email app’s buttons have been customized using Material Theming. Areas of customization include color and typography. Reply is an email app that uses Material...
This email app’s buttons have been customized using Material Theming. Areas of customization include color and typography.
Color
Reply’s buttons use custom color on four elements: background, icon, icon fill, and text.
Element | Category | Attribute | Value |
---|---|---|---|
Background | Surface | Color Opacity |
#FFFFFF 100% |
Icon | Primary | Color Opacity |
#344955 100% |
Icon fill | On Primary | Color Opacity |
#344955 30% |
Text | Primary | Color Opacity |
#344955 100% |
Typography
Reply’s buttons use custom typography for the button text.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Button | Typeface Font Size Case |
Work Sans ExtraBold 15 All caps |
Shrine Material theme
This retail app’s buttons have been customized using Material Theming. Areas of customization include color, typography, and shape. Shrine is a lifestyle and fashion brand...
This retail app’s buttons have been customized using Material Theming. Areas of customization include color, typography, and shape.
Color
Shrine’s buttons use custom color on three elements: the container, icon, and text.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Primary | Color Opacity |
#FEDBD0 100% |
Icon | On Primary | Color Opacity |
#442C2E 100% |
Text | On Primary | Color Opacity |
#442C2E 100% |
Typography
Shrine’s buttons use custom typography for the button text.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Button | Typeface Font Size Case |
Rubik Medium 14 All caps |
Shape
Shrine’s button containers have custom corner shapes, with cut corner shapes.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Small component | Family Size |
Cut 4dp; 4dp; 4dp; 4dp |
Specs
Contained button
- C Measurement C
- 36 Measurement 36
- min-width: 64dp Measurement min-width: 64dp
- 16 Measurement 16
- 16 Measurement 16
#6200eeff
R98 G0 B238 A1.00
- Shape
All corners
Rounded: 4dp
Contained button with icon
- 8 Measurement 8
- 12 Measurement 12
- 16 Measurement 16
- 36 Measurement 36
- min-width: 64dp Measurement min-width: 64dp
- C Measurement C
- 1818
#6200ee
R98 G0 B238
- Shape
All corners
Rounded: 4dp
Outlined button
- C Measurement C
- 16 Measurement 16
- 16 Measurement 16
- 36 Measurement 36
- min-width: 64dp Measurement min-width: 64dp
- 1 Measurement 1
#6200ee
R98 G0 B238
#0000001e
R0 G0 B0 A0.12
- Shape
All corners
Rounded: 4dp
Text button
- 36 Measurement 36
- min-width: 64dp Measurement min-width: 64dp
- 8 Measurement 8
- 8 Measurement 8
- C Measurement C
Toggle buttons
- 48 Measurement 48
- 12 Measurement 12
- 12 Measurement 12
- 12 Measurement 12
- 12 Measurement 12
- 48 Measurement 48
- 1 Measurement 1
- 2424
#000000
R0 G0 B0
#0000001e
R0 G0 B0 A0.12