Buttons

If possible, use only one primary button per page/UI component.

Button visuals are applied to elements, that match one of these CSS selectors.

You can use icons in buttons. But if you do, you have to put button text in some wrapper element (plain span in good enough), so margins work correctly.

Code Examples

<!-- Simple button -->
<a href="#" class="button">
	Button text
</a>

<!-- Disabled submit input -->
<input type="submit" class="disabled" value="value" />

<!-- Big button tag with icons on both sides -->
<button class="big">
	<svg class="icon icon-service-mergado" aria-hidden="true">...</use></svg>
	<span>Button text</span>
	<svg class="icon icon-service-mergado" aria-hidden="true">...</use></svg>
</button>

Buttons row

If you need multiple buttons in a single row, just wrap them in a .buttons-row element, like so:

<div class="buttons-row">
	<button class="secondary danger">Cancel</button>
	<button>Submit</button>
</div>

All possible combinations

Primary small Primary Primary big
Primary active small Primary active Primary active big
Primary disabled small Primary disabled Primary disabled big
Primary danger small Primary danger Primary danger big
Primary danger active small Primary danger active Primary danger active big
Primary danger disabled small Primary danger disabled Primary danger disabled big
Secondary small Secondary Secondary big
Secondary active small Secondary active Secondary active big
Secondary disabled small Secondary disabled Secondary disabled big
Secondary danger small Secondary danger Secondary danger big
Secondary danger active small Secondary danger active Secondary danger active big
Secondary danger disabled small Secondary danger disabled Secondary danger disabled big
Text small Text Text big
Text active small Text active Text active big
Text disabled small Text disabled Text disabled big
Text danger small Text danger Text danger big
Text danger active small Text danger active Text danger active big
Text danger disabled small Text danger disabled Text danger disabled big
Primary small Primary Primary big
Primary active small Primary active Primary active big
Primary disabled small Primary disabled Primary disabled big
Primary danger small Primary danger Primary danger big
Primary danger active small Primary danger active Primary danger active big
Primary danger disabled small Primary danger disabled Primary danger disabled big
Secondary small Secondary Secondary big
Secondary active small Secondary active Secondary active big
Secondary disabled small Secondary disabled Secondary disabled big
Secondary danger small Secondary danger Secondary danger big
Secondary danger active small Secondary danger active Secondary danger active big
Secondary danger disabled small Secondary danger disabled Secondary danger disabled big
Text small Text Text big
Text active small Text active Text active big
Text disabled small Text disabled Text disabled big
Text danger small Text danger Text danger big
Text danger active small Text danger active Text danger active big
Text danger disabled small Text danger disabled Text danger disabled big