Interactions
Button
Component for every call-to-action.
Elements
The component is composed of two element:
buttonthe wrapper- its child element, either a label, an icon, or both (they do not have specific classes)
<button type="button" class="button">Button</button>Properties
Add classes to the wrapper class to change the style of the component.
Kind
Change style depending on the button content.
class="button"
Default
class="button button--icon"
Variant
Change the style of the button. It is advised to stick as much as possible to one variant throughout your entire project.
class="button"
Default
class="button button--stroke"
class="button button--transparent"
Size
Override the default size of the component.
class="button button--xs"
class="button button--sm"
class="button"
Default
class="button button--lg"
Color
Override the default color of the component.
class="button"
Default
class="button button--secondary"
class="button button--highlight"
class="button button--grey"
class="button button--success"
class="button button--info"
class="button button--warning"
class="button button--error"
class="button button--default"
class="button button--contrast"
Disabled
Prevent users from clicking the button and change its styling and hover state accordingly.
class="button button--fullWidth"
Disabled
Prevent users from clicking the button and change its styling and hover state accordingly.
class="button button--disabled"
Icons
You can add svg icons to the left or right of the content.
class="button"
class="button"