Button

Buttons allow users to perform actions within a surface. They can be used alone for immediate action, or as a trigger for another component, like Dropdown or Popover.

also known as Action, CTA

a red button that says Save

Usage guidelines

When to use
  • Communicating an action that will occur.
  • Triggering or enabling an action, such as submitting requested information.
  • Progressing or regressing a user through a step in a flow.
When not to use
  • Directing users to a new page or different part within the same page.
  • Limited space available. Consider using an IconButton instead.

Best practices

For general Button best practices, refer to the Button web documentation.

  • Place primary buttons to the right or top of other buttons when in a button group.
  • Keep elements inside a button container grouped. Label text and icons should remain centered when the Button width increases.
  • Avoid using multiple button sizes in the same experience.
  • If necessary, adjust the button placement and size when scaling from large screens to small screens.

Accessibility

People use Android's accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessible design on Android

; Opens a new tab

Accessible development on Android
; Opens a new tab

Design tokens

Anatomy

Variants

Size

Mobile buttons are available in 2 sizes. The Button text always use $font-size-300 token (16sp).

  1. lg (60dp)
    Large should be primarily used on Pinner, business and internal surfaces.
  2. sm (44dp)
    Small should be used sparingly and only in places where the UI is very dense.

Width

  1. Inline (default)
    Inline is our default button width. The width of an inline Button is based on the length of its text. Use in most cases where you need a Button.
  2. Full-width (fullWidth)
    Full-width Buttons can be used in narrower content areas when the text in the Button is close to full width in the content area.

Styling

For more information on color, icons, roles, and states, refer to the web Button documentation

  1. Red (Primary)
    High emphasis, used for primary actions.
  2. Blue (Primary in shopping context)
    The blue Button is only intended for the shopping experience and is used for primary shopping actions.
  3. Gray (Secondary)
    Medium emphasis, used for secondary actions.
  4. Transparent (Tertiary)
    Low emphasis when placed on dark/image backgrounds, used for tertiary actions in that context. Note, this treatment should be used with caution as it has potential color contrast issues.

Primary

Shopping

Secondary

Tertiary

States

  1. Disabled
    Used to block user interaction such as hover, focus and click. Disabled Buttons are completely unreachable by a keyboard and screenreader, so do not attach Tooltips to disabled Buttons.
  2. Selected
    When Button is used to toggle a boolean state or control the visibility of other elements (e.g. Dropdown).

Disabled

Selected

Color

Writing

For writing best practices, refer to the web Button documentation.

Localization

For RTL (right-to-left) languages, the layout of the button is mirrored.

Edit page on GitHub
; Opens a new tab