Background
- We currently use too many styles for buttons in the app
- Material 3 introduced new common button specifications, and we’d like to align the design with it
Goals
- Define new button styles in the codebase so that they can be reused for future components work
- Make sure the buttons can be reused in different app parts (app bar, tooltips, cards, dialogs, etc.)
- Straightforward communication
Updates (Figma)
| Sizing |  |
| Measurements |  |
- Type
- There are five types of buttons: primary, secondary, tertiary, text-primary, text-tertiary
- All buttons types can contain an icon
- Buttons use sentence case, no ALL CAPS anymore
- All buttons use h3-button (font-family: Roboto Medium; font-size: 16sp; line-height: 24sp:) type style defined in T330753
- Sizing
- Icon size is now 24dp x 24dp
- Colored background of buttons is 40dp high (tap target for all buttons is 48dp)
- Buttons use a fully rounded corner radius (20dp)
- Spacing
- 8dp vertical padding
- 14dp horizontal padding
- Colors
- All buttons use color definitions from T330645
- Usage examples:
- Primary buttons are used in the Suggested edits feed
- Secondary buttons are used in tooltips, cards (e.g. "Got it"), and saving a shared reading list
- Tertiary buttons are used in cards
- Text primary buttons are used in the app bar and dialogs
- Text secondary buttons are used in dialogs