Skip to content

BUTTONS

Buttons trigger the action that will occur when the user touches them. Material buttons trigger an ink reaction on press. They may display text, imagery, or both. Flat buttons and raised buttons are the most commonly used types.

Flat Buttons

  1. Flat buttons are text-only buttons.
  2. They may be used in dialogs, toolbars, or inline.
  3. They do not lift, but fill with color on press.

Raised buttons

  1. Raised buttons are rectangular-shaped buttons.
  2. They may be used inline.
  3. They lift and display ink reactions on press.

Additional Button types include:

  1. Persistent footer buttons are flat buttons that may be used in screen footers or dialogs.
  2. Dropdown buttons display multiple selections.
  3. Toggle buttons group related options. Icon toggles allow a single choice to be selected or deselected.

Button Types:

  1. Floating action button: A circular material button that lifts and displays an ink reaction on press.
  2. Raised button: A typically rectangular material button that lifts and displays ink reactions on press.
  3. Flat button: A button made of ink that displays ink reactions on press but does not lift.

Usage

  1. Dialogs - Use flat buttons in dialogs.
  2. Inline - Raised buttons or flat buttons can be used for inline buttons.
  3. Always available - If your app requires actions to be persistent and readily available, you can use the floating action button or persistent footer buttons.

Standard dialogs :

Button alignment on screen: right Place the affirmative button on the right, the dismissive button on the left.

Forms:

Button alignment on screen: Left Place the affirmative button on the left, the dismissive button on the right.

Cards:

Buttons are best placed on the left side of a card to increase their visibility.

Non-standard dialogs and modal windows :

Button placement in non-standard dialogs and modal windows depends on the complexity of the content they contain.For dialogs with relatively simple content, it is recommended to place buttons on the right side of a dialog,For lengthy or complex forms, it is recommended to place buttons on the left of the form, with the affirmative button to the right of the dismissive button.

Style

Typography :

Button text should be capitalized in languages that have capitalization. For other languages, colored text on flat buttons distinguishes them from normal text.

Accessibility :

To ensure usability for people with disabilities, give buttons a height of 36dp and give touchable targets a minimum height of 48dp.

Corner radius

Buttons should have a 2dp corner radius.

Density

When mouse and keyboard are the primary input methods, button measurements can be slightly reduced to accommodate dense UIs.

Flat Buttons

Usage:

Flat buttons are printed on material. They do not lift, but fill with color on press.

use flat buttons in following areas:

  1. On toolbars
  2. On In dialogs, to unify the button action with the dialog content
  3. Inline, with padding, so the user can easily find them

Specs:

for specs click here.

Raised Buttons

Usage:

Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces. Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.

Button Elevation

Raised buttons have a default elevation of 2dp. On desktop, raised buttons can gain this elevation on hover.

If your app requires actions to be persistent and readily available to the user, consider using the floating action button or persistent footer buttons.

A dropdown button selects between multiple selections. The button displays the current state and a down arrow. Available states may be shown as a list of strings, a palette, or icons.Scrolling within the dropdown behaves the same way a menu scrolls.

Generic overflow dropdown button

The generic overflow dropdown button displays an arrow or menu button by default.When the button is pressed, the menu appears. Pressing an option on the menu navigates to further settings for that option.

Segmented dropdown button

A segmented dropdown has two sections: the current state and the dropdown arrow icon. Pressing the current state will cause that state’s action to fire within the screen. Pressing the dropdown arrow will display all the state options. Selecting one will change the displayed state.

Editable segmented dropdown button

This button has a segmented dropdown, where the displayed state is text editable

Desktop dropdowns

Desktop app bar specs

FOR SPECS click here

Toggle Buttons

Toggle buttons may be used to group related options.

Toggle button requirements:

  1. Have at least three toggle buttons in a group.
  2. Label buttons with text, an icon, or both.

The following combinations are recommended:

  1. Multiple and unselected.
  2. Exclusive and unselected.
  3. Exclusive only.

Icon toggles

Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

They are best located in app bars, toolbars, action buttons or toggles.