Components — Buttons

Buttons

A button clearly communicates what action will occur when the user touches it. It consists of text, an icon, or both.

Button Types

There are three standard types of buttons:

  • Flat Button: A button made of ink that displays ink reactions on press but does not lift.
  • Wire Button: A typically rectangular material button that lifts and displays ink reactions on press, but does not lift.
  • Round Buttons: A flat circular button with either a "+"" or an "x", to indicate add or remove respectively.

Usage

Flat Buttons

Use flat buttons in the following locations:

  • On toolbars
  • Inline, with padding, so the user can easily find them
  • When multiple wire buttons are on a screen a flat button using the accent color is used for the primary CTA

Wire Buttons

Use wire buttons in the following locations:

  • On overlays
  • On images
  • When an alternate button style is needed on a card

Round Buttons

Use round buttons in the following locations:

  • Add/Remove buttons

Flat Buttons

A flat action button can have the 3 states:

  • Active/Enabled: Normal state where user can click and perform the action.
  • Inactive/Disabled: When user can’t interact with the button given the context.
  • Tooltips with error message: In addition to the inactive/disabled state, there can be a ! icon with tooltips containing error message to indicate what is causing the state. This is most helpful when it is potentially unclear what is causing the state and/or it is critical to resolve the inactive/disabled state.

Enabled Flat Buttons

Disabled Flat Buttons

Flat Button with error icon

Wire Buttons

Wire buttons are essentially flat buttons with a frame around them this allows for an alternate button look without increasing primacy, maintaining the design's minimalist feel. Wire buttons do not lift, but fill with color on press.

Media card on Gallery page

Edit media overlay

Round Buttons

When the same pattern of input can be used multiple times in order to form a group, add/remove buttons can be used to add new rows of the pattern or remove the row.

Cast and Credits card on Season page