Interactions
Buttons
Wrap several buttons inside a self-contained element to ensure consistent spacing, sufficient spacing on smaller devices, and define responsive wrapping behaviour.
Elements
The component is composed of two element:
buttonsthe wrapper- its child
buttonelements. Can also be nestedbuttonselements.
- its child
<div class="buttons buttons--wide">
<a href="#" class="button button--error">Cancel</a>
<div class="buttons">
<a href="#" class="button button--grey">Skip</a>
<a href="#" class="button">Next</a>
</div>
</div>Properties
Add classes to the wrapper class to change the style of the component.
Direction
Change the direction of the component.
class="buttons"
Default
class="buttons button--portrait"
Full width
Makes the child buttons 100% of the parent width, and automatically stacks them.
class="buttons buttons--fullWidth"
Wide
Uses the flexbox property align-items: space-between to place the children on both side of the parent container. Only works with the default landscape direction.
class="buttons buttons--wide"