smartButton

Buttons communicate 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.

Additional button types include:

Persistent footer buttons are flat buttons that may be used in screen footers or dialogs.
Floating action buttons are circular buttons that represent the primary action in an application.
Dropdown buttons display multiple selections.
Toggle buttons group related options. Icon toggles allow a single choice to be selected or deselected.

Flat buttons

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

Raised buttons

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

Elevation

Flat buttons: 0dp
Raised buttons: 2dp

Button types

There are three standard types of buttons:

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

Floating action button

button

Raised button

button

Flat button

Example of a floating action button

force stop

uninstall

clear data

Example of a raised button

disagree

agree

Example of a flat button

Choosing button style

Choosing a button style depends on the primacy of the button, the number of containers on screen, and the screen layout.

Function: Is it important and ubiquitous enough to be a floating action button?

Dimension: Choose raised or flat depending on the container it will be in and how many z-space layers you have on screen. There should not be many layers of objects on the screen.

Layout: Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function.

Usage

Button types

The type of button used should be suited to the context in which it appears.

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

Recommended button placement

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. However, as cards have flexible layouts, buttons may be placed in a location suited to the content and context, while maintaining consistency within the product.

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, with the affirmative button to the right of the dismissive button.

For lengthy or complex forms, it is recommended to place buttons on the left of the form, with the affirmative button to the left of the dismissive button.

Style

Button themes

All kind of themes can be applied to the button custom element. However, there are two major themes light and dark.

Custom themes can be created by changing colors of the desired sections of the buttons.

The following CSS variables allow easier visual customization:

--smart-material-color is the default font color of the button.
--smart-material-background-color is the default background color of the button.
--smart-material-focused-background-color is the background color of the button in focused state.
--smart-material-hovered-background-color is the background color of the button on hover.
--smart-material-pressed-background-color is the background color of the button when pressed.

Flat buttons

Specs & Behavior

normal

focused

Pressed

disabled

Flat Light/Light theme

Minimum width: 85px

Height: 36px

Border radius: 2px

Focused: #D5D5D5

Hovered: #009FEF

Pressed: #CCCCCC

Disabled text: 0.55 #555

normal

focused

Pressed

disabled

Flat Dark/Dark theme

Minimum width: 85px

Height: 36px

Border radius: 2px

Focused: #4C4C4C

Hovered: #5A5A5A

Pressed: #595959

Disabled text: 0.55 #555

Demo usage

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

explore

Flat buttons minimize distraction from content.

button

Flat buttons are appropriate in dialogs.

Raised buttons

Specs & Behavior

Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.

normal

focused

Pressed

disabled

Raised Light/Light theme

Minimum width: 85px

Height: 36px

Border radius: 2px

Focused: #D5D5D5

Hovered: #009FEF

Pressed: #CCCCCC

Disabled text: 0.55 #555

normal

focused

Pressed

disabled

Raised Dark/Dark theme

Minimum width: 85px

Height: 36px

Border radius: 2px

Focused: #2076C3

Hovered: #009FEF

Pressed: #1978CC

Disabled text: 0.55 #555

Demo usage

Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces.

force stop

uninstall

clear data

Raised buttons stand out more than flat buttons.

button

Raised buttons can help delineate sections of content on a page.

Floating action buttons

A floating action button represents the primary action in an application.

A floating action button is used for a promoted action.

Shaped like a circled icon floating above the UI, it changes color upon focus and lifts upon selection. When pressed, it may contain more related actions.

Usage

Only one floating action button is recommended per screen to represent the most common action.

Behavior

It animates onto the screen as an expanding piece of material, by default.

Sizes

Default: 56 x 56dp
Mini: 40 x 40dp

The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.

Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.

Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.

Specs & Behavior

Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.

Raised Light/Light theme

Minimum width: 40px

Height: 40px

Border radius: 50%

Focused: #D5D5D5

Hovered: #009FEF

Pressed: #CCCCCC

Disabled text: 0.55 #555

Raised Dark/Dark theme

Minimum width: 40px

Height: 40px

Border radius: 50%

Focused: #2076C3

Hovered: #009FEF

Pressed: #1978CC

Disabled text: 0.55 #555

Demo usage

Floating action buttons are designed to be flexible.

The floating action button can simply trigger an action or navigate somewhere. The animation of the touch ripple expands outwards as the force that causes changes to the UI.

A floating action button flinging out related actions

A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes.

smartToggleButton

Toggle buttons may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.

Focus and pressed states may reinforce that toggles are part of a group. For example, when one button segment is focused, focus may be displayed simultaneously on the rest of the segment.

Toggle button requirements:

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

The following combinations are recommended:

Multiple and unselected
Exclusive and unselected
Exclusive only

Exclusive selection

Text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time. Selecting one option deselects any other.

No options are selected

Multiple selection

Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.

One option is selected

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.

Icon toggles may display bounded or unbounded ink surface reaction ripples beyond their touch-target bounds.

Toggles

normal	hover	focused	pressed	inactive

Icon toggles in normal, hover, focused, pressed, and inactive states

Light icon

30% white

Dark icon

12% black

Color icon

26% color

Dark Theme

20% white

Dark Theme

26% color

The icon toggle focus indicator color and opacity are related to the color of the icon.

smartPowerButton

Power button is a two-state type of toggle button with an indicator.

Used as indicator.

Flat power button Light/Light theme

Flat power button Dark/Dark theme

Raised Power button Light/Light theme

Raised Power button Dark/Dark theme

Demo usage

A power button can control the loading process.

smartLED

LED button is a type of toggle button that has three states: checked, unchecked and indeterminate.

Used as indicator.

Theme	normal	pressed	indeterminate	inactive
Light
Dark

smartRepeatButton

Repeat buttons are normal buttons that repeat a single action until release.

The repeat button can simply trigger an action multiple times depending on the time interval applied.

Repeat buttons can be used for navigation.

A repeat button can also be used to configure a range control.

Specs & Behavior

Repeat button Light/Light theme

Minimum width: 30px

Height: 30px

Border radius: 2px

Focused: #D5D5D5

Hovered: #009FEF

Pressed: #CCCCCC

Disabled text: 0.55 #555

Repeat button Dark/Dark theme

Minimum width: 30px

Height: 30px

Border radius: 2px

Focused: #4C4C4C

Hovered: #5A5A5A

Pressed: #595959

Disabled text: 0.55 #555

Demo usage

Repeating actions can be performed using Repeat buttons.

Repeat buttons that control the fill of the progress bar.

Progress bars : vertical and circular.

Repeat button nested inside a Circular progress bar.

Light theme

Dark theme

smartCheckBox

Checkboxes allow the user to select multiple options from a set.

If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.

If you have a single option, avoid using a checkbox and use an on/off switch instead.

Light theme for check boxes

Dark theme for check box

Light

On: #009788, Opacity 100%

Off: #555, Opacity 100%

Disabled: #000000, Opacity 25%

	hover	focused	pressed	disabled
On
Off

Light theme for check box in hover, focused, pressed, disabled states.

Dark

On: #009788, Opacity 100%

Off: #1978CC, Opacity 100%

Disabled: #FFFFFF, Opacity 25%

	hover	focused	pressed	disabled
On
Off

Dark theme for check box in hover, focused, pressed, disabled states.

smartRadioButton

Radio buttons allow the selection of a single option from a set.

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side

Otherwise, consider a dropdown, which uses less space than displaying all options.

Light theme for radio buttons

Dark theme for radio buttons

Light

On: #009788, Opacity 100%

Off: #555, Opacity 100%

Disabled: #000000, Opacity 25%

	hover	focused	pressed	disabled
On
Off

Light theme for radio buttons in hover, focused, pressed, disabled states.

Dark

On: #009788, Opacity 100%

Off: #1978CC, Opacity 100%

Disabled: #FFFFFF, Opacity 25%

	hover	focused	pressed	disabled
On
Off

Dark theme for radio buttons in hover, focused, pressed, disabled states.

smartSwitchButton

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

Material switch buttons don't use labels.

Light theme

Dark theme

Light

Thumb On: #009788, Opacity 100%

Track On: #009788, Opacity 60%

Thumb Off: #000000, #FAFAFA, Opacity 30%

Track Off: #808080, Opacity 100%

Disabled: #000000, Opacity 25%

	hover	focused	pressed	disabled
On
Off

Light theme for switches in hover, focused, pressed, disabled states.

Dark

Thumb On: #00d2bd, Opacity 100%

Track On: #00d2bd, Opacity 60%

Thumb Off: #00000, Opacity 80%

Track Off: #00000, Opacity 40%

Disabled: #FFFFFF, Opacity 25%

	hover	focused	pressed	disabled
On
Off

Dark theme for switches in hover, focused, pressed, disabled states.

smartMultiSplitButton

The split button allows having multiple buttons inside one.

The Multi Split Button is a composite control with which the user can select a default value bound to a primary button, or select from a list of mutually exclusive values displayed in a drop-down list bound to a secondary button.

Multi Split Button

Light theme

Multi Split Button

Dark theme