Usage
Reference Material Design for general guidance when designing for Android.
Design properties
| Property | Values | Default |
|---|---|---|
| State Variant | Enabled | Hovered | Focused | Pressed | Disabled | Enabled |
| Style Variant | Filled | Outlined | Text | Destructive | Filled |
| Icon InstanceSwap | ||
| Show Icon Variant | False | True | False |
Types
Filled
Outlined
Destructive
Text
Writing guidelines
Button label text should be clear, descriptive, and use active verbs so people know what to expect when they interact with the button.
- Write labels in sentence case.
- Lead with clear action verbs that convey the outcome.
- Use Choose or Select in place of Click or Tap.
- Be consistent with terms inside the button and any instructional text.
- When possible, include labels when using icons.
- Use unnecessary words or articles, such as "the, an, or a".
- Use ellipses in a label unless it leads to additional choices
- Use “OK” as a label, button labels should always be actionable and lead to what comes next
Casing: Write button text labels in sentence case. Capitalize the first word and lowercase the rest (unless the text contains a proper noun).
Width: Set a max width for the button, designing for at least 50+ string growth compared to English. Buttons themselves should not have a hard-coded fixed width — width is determined by length of text labels.
Stacking: Allow buttons to grow as much as they need to within the max width. When you have two buttons and they don’t fit in the same line, then wrap the button component itself (not the button text). The secondary button will move to the second line. Both buttons will be the same width.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 1, 2025 |
2.1.0 |
Updated to reflect M3 changes |
|
Apr 17, 2025 |
2.0.0 |
Simplified template |
|
Feb 15, 2023 |
1.0.0 |
Initial draft of button guidance |