Buttons

Following types of buttons can be created using this framework:

• Primary button
• Secondary button
• Ghost button
• Info button
• Success button
• Waning button
• Error button

To create a button, use the <button> tag with class .button. By default, the button will be the primary button.

<button class="button">Button</button>

To create a secondary button, add another class .button-secondary.

<button class="button button-secondary">Button</button>

To create a ghost button, add this class: .button-ghost.

<button class="button button-ghost">Button</button>

To create a grey button, add this class: .button-grey.

<button class="button button-grey">Button</button>

To create an info button, add this class: .button-info.

<button class="button button-info">Button</button>

To create a success button, add this class: .button-success.

<button class="button button-success">Button</button>

To create a warning button, add this class: .button-warning.

<button class="button button-warning">Button</button>

To create an error button, add this class: .button-error.

<button class="button button-error">Button</button>

To create a disabled button, append another class to the existing classes .button-disabled.

<button class="button button-disabled">Button</button>

Here's how disabled buttons look like (for each type of button.)