Button

Documentation is WIP, check open issues and start improving!
Search
Close

Small

Small button is used in Cells with other type of information — Icon, Text, etc.

Request using Grab
Open an App

Inverse

Inverse style is used as secondary button next to primary button in Modals and other cases.

Search
Search

Documentation

Specifications

// Base

$button-height                        : unit(10);                          // 40px
$button-height-small                  : unit(8);                           // 32px

$button-border-width                  : unit(0.5);                         // 2px

$button-border-radius                 : unit(1.5);                         // 6px
$button-border-radius-small           : unit(1);                           // 4px

$button-background-color-hover        : palette(cd1);

$button-vertical-padding-top          : (unit(2.75) - $button-border-width);  // 11px
$button-vertical-padding-bottom       : (unit(2.25) - $button-border-width);  // 9px
$button-vertical-padding-small-top    : (unit(2.25) - $button-border-width);  // 9px
$button-vertical-padding-small-bottom : (unit(1.75) - $button-border-width);  // 7px

$button-horizontal-padding            : (unit(3) - $button-border-width);     // 12px
$button-horizontal-padding-small      : (unit(2.5) - $button-border-width);   // 10px

$button-text-type                     : 'title';
$button-text-type-small               : 'label';

$button-text-color                    : palette(cl1);

// States

$button-focused-darkness-unit         : 0.02;                                 // 0.02
$button-clicked-darkness-unit         : ($button-focused-darkness-unit * 2);  // 0.04

$button-hover-background-opacity      : 0.84;                                 // 0.84

API

Name Values Default
text string ’’
color string CP2
size medium / small medium
width content / parent parent
inverse true / false false