# Buttons

<br />

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](https://developers.google.com/cars/design/automotive-os/components/tabs), which always appear in groups.

*** ** * ** ***

## Anatomy

![Buttons anatomy](https://developers.google.com/cars/design/automotive-os/components/images/buttons-anatomy-1.png) 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.](https://developers.google.com/cars/design/automotive-os/components/images/buttons-spec-1.png) 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.](https://developers.google.com/cars/design/automotive-os/components/images/buttons-spec-3.png) 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](https://developers.google.com/cars/design/automotive-os/components/app-bar) or [dialogs](https://developers.google.com/cars/design/automotive-os/components/dialogs).

### Button placement in app bar

![Buttons are placed on the right side of the app bar](https://developers.google.com/cars/design/automotive-os/components/images/buttons-spec-2.png) 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](https://developers.google.com/cars/design/automotive-os/components/images/buttons-spec-4.png) 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](https://developers.google.com/cars/design/automotive-os/components/images/buttons-spec-5.png) 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](https://source.android.com/devices/automotive/hmi/car_ui) provides OEM guidance for customizing components.

[Design system](https://developers.google.com/cars/design/automotive-os/design-system/overview) provides specific guidance for using layout, color, typography, sizing, shape, and motion to customize components.

*** ** * ** ***

## Examples

![unfilled and filled buttons](https://developers.google.com/cars/design/automotive-os/components/images/buttons-mock-1.png) Unfilled and filled buttons, where the filled button indicates the primary action ![disabled filled button](https://developers.google.com/cars/design/automotive-os/components/images/buttons-mock-2.png) This filled button's color and opacity indicate a disabled state ![Unfilled button dialog](https://developers.google.com/cars/design/automotive-os/components/images/buttons-mock-3.png) Unfilled buttons in a dialog indicate equally-weighted actions ![button ripple motion duration](https://developers.google.com/cars/design/automotive-os/components/images/buttons-different-shapes.gif) These ripple motions have a duration of 330ms. They're used to confirm user contact with a button. ![Buttons ripple animation](https://developers.google.com/cars/design/automotive-os/components/images/buttons-ripple.gif) 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.