UI Library

Buttons

Buttons (colors)

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Buttons with different colors.

<insert-markup>buttons.colors-</insert-markup>
.m-btn--primary
primary button
<insert-markup>buttons.colors-0</insert-markup>
.m-btn--warning
warning button
<insert-markup>buttons.colors-1</insert-markup>
.m-btn--danger
danger button
<insert-markup>buttons.colors-2</insert-markup>
Markup 
<button class="m-btn [modifier class]">Button</button>
Source: static/css/src/_m-btn.scss, line 105

Buttons (UI states)

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Buttons user-interaction states.

<insert-markup>buttons.uistates-</insert-markup>
:hover
mouse over state
<insert-markup>buttons.uistates-0</insert-markup>
:active
pressed state
<insert-markup>buttons.uistates-1</insert-markup>
:disabled
disabled, not clickable
<insert-markup>buttons.uistates-2</insert-markup>
Markup 
<button class="m-btn [modifier class]">Button</button>
<button class="m-btn m-btn--primary [modifier class]">Button</button>
<button class="m-btn m-btn--warning [modifier class]">Button</button>
<button class="m-btn m-btn--danger [modifier class]">Button</button>
Source: static/css/src/_m-btn.scss, line 1