Buttons

A button communicates an action that will occur when a user touches it.

Buttons are standard Android Open Source Project (AOSP) components. They can either be filled with a solid background color, or unfilled (with a transparent background). Filled buttons indicate a primary or preferred action. Buttons can appear independently or in groups – unlike tabs, which always appear in groups.

Anatomy

Buttons anatomy
1. Unfilled button container
2. Filled button container, indicating the primary or preferred action
3. Button label

Specs

Button min and max length

Maximum button label length is 20 characters. Minimum button width is 156dp.
Maximum button label length is 20 characters. Minimum button width is 156dp.

Button with icon vs. default button

Buttons can include icons. When included, icons typically appear to the left of button text.
Buttons can include icons. When included, icons typically appear to the left of button text.

Buttons can appear as elements in other components, such as the app bar or dialogs.

Button placement in app bar

Buttons are placed on the right side of the app bar
Buttons are placed on the right side of the app bar

Button in dialog

Buttons in dialogs are typically located at the bottom left side of a dialog
Buttons in dialogs are typically located at the bottom left side of a dialog

Hero button

The rounded edges of a hero button emphasizw its importance
The rounded edges of a hero button emphasize its importance

Customization

OEMs can reflect their brand by modifying a button's visual appearance, such as:

  • Specifying an accent color
  • Supplying custom icons
  • Adding custom fonts
  • Changing the appearance of active, inactive, and disabled buttons
  • Setting button dimensions, corner shape, and placements
  • Using motion to provide feedback to users

The Car UI Library Integration Guide provides OEM guidance for customizing components.

Design system provides specific guidance for using layout, color, typography, sizing, shape, and motion to customize components.

Examples

unfilled and filled buttons
Unfilled and filled buttons, where the filled button indicates the primary action
disabled filled button
This filled button's color and opacity indicate a disabled state
Unfilled button dialog
Unfilled buttons in a dialog indicate equally-weighted actions
button ripple motion duration
These ripple motions have a duration of 330ms. They're used to confirm user contact with a button.
Buttons ripple animation
These ripple motions initially overlay 60% of the button surface. They expand away from the user's tap, and stop 10dp from the button's edge.