Button Component

Button component gives you a minimal, cross browser version of an html button and a set of options to customize it to your needs.


Installation

npm install --save-dev iotacss-components-button

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Name Type Default Description
$iota-components-button-namespace String button Class namespace
$iota-components-button-color String rgb(255, 255, 255) Button text color
$iota-components-button-margin Number / Map 0 Button margin
$iota-components-button-padding Number / Map $iota-global-gutter-default Button padding
$iota-components-button-border String none Button border
$iota-components-button-background String rgb(57, 178, 255) Button background

Class list

1
.c-button

How to use it

The right way of the button component to be used, is to use the local settings for the default styling of your button and then create some new button modifiers for the rest of the styles. For example, if we need a primary button that has a red background and a secondary button that has a grey background, we should do:

1
2
.c-button--primary    { background-color: red }
.c-button--secondary  { background-color: grey }
1
2
<button class="c-button c-button--primary">I am a primary button</button>
<button class="c-button c-button--secondary">I am a secondary button</button>