Redbooth

Btn

SizesBtn - Sizes

Only changes font-size and line height

  • .btn--large - Bigger size
  • .btn--small - Smaller
  • .btn--extra-small - Smallest
.btn--large
.btn--small
.btn--extra-small 
<button class="btn [modifier class]">I'm a button</button>
<button class="btn btn--flat [modifier class]">I'm a flat button</button>

DefaultBtn - Default

Only changes font-size and line height

  • .btn--disabled - When the button is disabled
  • :active - When the button is active
  • :focus - When the button is active
  • :hover - When the button is hovered
.btn--disabled
:active
:focus
:hover 
<button class="btn [modifier class]">I'm a button</button>
<button class="btn btn--flat [modifier class]">I'm a flat button</button>

PrimaryBtn - Primary

The main action

  • .btn--disabled - When the button is disabled
  • :active - When the button is active
  • :focus - When the button is active
  • :hover - When the button is hovered
.btn--disabled
:active
:focus
:hover 
<button class="btn btn--primary [modifier class]">I'm a button</button>
<button class="btn btn--primary btn--flat [modifier class]">I'm a flat button</button>

DangerBtn - Danger

The dangerous action

  • .btn--disabled - When the button is disabled
  • :active - When the button is active
  • :focus - When the button is active
  • :hover - When the button is hovered
.btn--disabled
:active
:focus
:hover 
<button class="btn btn--danger [modifier class]">I'm a button</button>
<button class="btn btn--danger btn--flat [modifier class]">I'm a flat button</button>

TangoBtn - Tango

The "urgent" action

  • .btn--disabled - When the button is disabled
  • :active - When the button is active
  • :focus - When the button is active
  • :hover - When the button is hovered
.btn--disabled
:active
:focus
:hover 
<button class="btn btn--tango [modifier class]">I'm a button</button>
<button class="btn btn--tango btn--flat [modifier class]">I'm a flat button</button>