Button

Updated on 04 October 2016

Docs are work in progress, check open issues and see how you can help!

Styles

Default

We are default to muted style of buttons, because you need to decide which of the buttons and/or actions on the screen ar primary and set this specifically.

Default Button
Filled

This style is used for primary buttons

Filled Button
Flat

Style for buttons, that do not look like buttons from the first sight - have no background fill or visible borders. Yet it has tappable area and does some kind of action. Its label stands out or there is just icon inside.

Flat Button

Inverse

Inverse button for colorful backgrounds — it uses base color on text and applies it on background as well for states such as hover and active.

Inverse Button

Width

Parent

Buttons that fill entire parent container horizontally. Used for main screen/section actions.

Default Button

Filled Button

Flat Button

Inverse Button
Content

Buttons that are placed in list cells etc. and has content around them.

Default Button
Filled Button
Flat Button
Inverse Button

Sizes

Default

Default button size, used for screen main actions, etc.

Default Size

Default Size Filled

Default Size Flat

Default Size Inverse

Default Content
Default Content Filled
Default Content Flat
Default Content Inverse
Medium

Slightly smaller as default, used in card actions.

Medium Button

Medium Filled Button

Medium Flat Button

Medium Inverse Button

Medium Content Button
Medium Content Filled Button
Medium Content Flat Button
Medium Content Inverse Button
Small

Sometimes you need display smaller actions, this option is for you. Especially when using content buttons

Small Button

Small Filled Button

Small Flat Button

Small Inverse Button

Small Content Button
Small Content Filled Button
Small Content Flat Button
Small Content Inverse Button

Themes

Default

By default buttons use brand color as their default color

Default Button

Filled Button

Flat Button

Inverse Button

Medium Button

Medium Filled Button

Medium Flat Button

Medium Inverse Button

Filled Small Container Button
Small Container Button
Flat Small Container Button
Inverse Small Container Button
Other

Other themes are based on Colors.

Default Button

Amplified Button

Muted Button

Success Button

Warning Button

Themes work for other variations too: small, content buttons - for any kind of them

Filled Button

Filled Amplified Button

Filled Muted Button

Filled Success Button

Filled Warning Button

Inverse Medium Button

Inverse Medium Amplified Button

Inverse Medium Muted Button

Inverse Medium Success Button

Inverse Medium Warning Button


Medium Content Button
Small Amplified Content Button
Small Muted Content Button
Small Success Content Button
Small Warning Content Button


Flat Small Content Button
Flat Small Amplified Content Button
Flat Small Muted Content Button
Flat Small Success Content Button
Flat Small Warning Content Button

States

Default

Default state is primary case for all button types.

Default Button

Default Filled Button

Default Flat Button

Default Inverse Button
Focused

Focused state is used when user focused or hovers with mouse pointer on a button. Buttons have additional background layer with 0.02 opacity. Filled Button has black color layer with this opacity, and other types use theme color instead.

Focused Button

Focused Filled Button

Focused Flat Button

Focused Inverse Button

Clicked

Clicked state is used when user clicks or pressed the button. Buttons have additional background layer with 0.04 opacity. Filled Button has black color layer with this opacity, and other types use theme color instead.

Clicked Button

Clicked Filled Button

Clicked Flat Button

Clicked Inverse Button

Disabled

Disabled state is used when buttons are disabled. Disabled buttons have 0.48 opacity and are not clickable.

Disabled Button

Disabled Filled Button

Disabled Flat Button

Disabled Inverse Button

Specifications

// Base

$button-border-width               : unit(0.25);
$button-border-radius              : radius(default);

// Styles

$button-default-color              : currentColor;

$button-default-background         : none;
$button-default-border-color       : currentColor; // inherits button color

$button-filled-background          : currentColor; // inherits button color
$button-filled-border-color        : currentColor; // inherits button color

$button-flat-background            : none;
$button-flat-border-color          : transparent;

$button-inverse-background         : palette(cg9);
$button-inverse-border-color       : $button-inverse-background;

// Text

$button-text-type                  : 'title';
$button-medium-text-type           : 'subtitle';
$button-small-text-type            : 'caption';

$button-text-theme                 : 'primary';
$button-inverse-text-style         : 'inverse';
$button-backround-color            : currentColor;
$button-filled-text-style          : 'inverse';
$button-filled-inverse-label-color : currentColor;

// Sizes

$button-default-height             : unit(10);
$button-default-vertical-padding   : unit(2.25) - $button-border-width; // Compensate border height
$button-default-horizontal-padding : unit(3);

$button-medium-height              : unit(9);

$button-small-height               : unit(6);
$button-small-vertical-padding     : unit(1) - $button-border-width; // Compensate border height
$button-small-horizontal-padding   : unit(2);

// Themes

$button-default-text-theme         : 'primary';
$button-amplified-text-theme       : 'amplified';
$button-muted-text-theme           : 'muted';
$button-success-text-theme         : 'success';
$button-warning-text-theme         : 'warning';

// States

$button-focused-darkness-unit      : 0.02;
$button-clicked-darkness-unit      : ($button-focused-darkness-unit * 4);
$button-disabled-opacity-unit      : ($button-focused-darkness-unit * 24);

$button-focused-border-color       : currentColor;
$button-focused-background-color   : currentColor;

API

name type default
style normal / filled / flat normal
size normal / medium / small normal
theme primary / amplified / muted / success / warning primary
inverse false / true false
text String ””
width content / parent parent
enabled Boolean true