Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non.
Use class .Button--primary to create a button using <a> (outside forms) or <button> (only inside forms).
Also add one of the following classes to give it format:
.Button--primary for a primary action style
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary">Anchor Button primary default</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary">Button primary default</button>
<button class="Button Button--primary is-disabled" disabled>Button primary default disabled</button>
Use class .Button--secondary to create a button using <a> (outside forms) or <button> (only inside forms).
<!-- Anchors (links) -->
<a href="#" class="Button Button--secondary">Anchor Button secondary</a>
<!-- Buttons (actions) -->
<button class="Button Button--secondary">Button secondary</button>
<button class="Button Button--secondary is-disabled" disabled>Button secondary disabled</button>
Use class .Button--small to create a button with small size.
.Button--small for a primary action style
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary Button--small">Anchor Button medium</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary Button--small">Button medium</button>
<button class="Button Button--primary Button--small is-disabled" disabled>Button medium disabled</button>
Use class .Button--large to create a button with large size.
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary Button--large">Anchor Button large</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary Button--large">Button primary default</button>
<button class="Button Button--primary Button--large is-disabled" disabled>Button large disabled</button>
Use class .Button-group to create a button group structure.
Use class .Button--secondary (or the class for an specific button) for buttons inside buttons group.
<div class="Button-group">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
Use class .is-active to highlight the selected button.
<div class="Button-group">
<button class="Button Button--secondary is-active" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
Use class .is-disabled to mark a button as disabled.
<div class="Button-group">
<button class="Button Button--secondary is-disabled" type="button">year</button>
<button class="Button Button--secondary is-disabled" type="button">month</button>
<button class="Button Button--secondary is-disabled" type="button">hour</button>
</div>
Use class .Button-group-justified to display .Button-group full width buttons.
<div class="Button-group Button-group--justified">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
Use class .Button-group--centered to display .Button-group centered.
<div class="Button-group Button-group--centered">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>