Meet the ubiquitous button; your friend when it's time to guide users through flows or complete a conversion.
| Modifier Classes | Modifies | Description |
|---|---|---|
.btn--default | .a, <button> | Create a standard button. |
.btn--success | .a, <button> | Use this state to indicate positive, forward progress |
.btn--warning | .a, <button> | Create a button that indicates caution |
.btn--info | .a, <button> | Use this state for triggering supplemental information |
.btn--error | .a, <button> | Use this button to depict extreme caution or severity of action |
.btn--disabled | .a, <button> | This button state is for when an action is unavailable |
.btn--primary | .a, <button> | Button mapped to your branding's primary color, derived from color mappings in _colors.scss |
.btn--secondary | .a, <button> | Button mapped to your branding's secondary color, derived from color mappings in _colors.scss |
.btn--sm | .a, <button> | Decrease the padding and font size of your button |
.btn--lg | .a, <button> | Increase the padding and font size of your button |
<div class="btn-group">
<a href="#" class="btn btn--default">Default</a>
<a href="#" class="btn btn--success">Success</a>
<a href="#" class="btn btn--warning">Warning</a>
<a href="#" class="btn btn--info">Info</a>
<a href="#" class="btn btn--error">Error</a>
<a href="#" class="btn btn--disabled">Disabled</a>
</div><div class="btn-group">
<a href="#" class="btn btn--default--line">Default</a>
<a href="#" class="btn btn--success--line">Success</a>
<a href="#" class="btn btn--warning--line">Warning</a>
<a href="#" class="btn btn--info--line">Info</a>
<a href="#" class="btn btn--error--line">Error</a>
<a href="#" class="btn btn--disabled--line">Disabled</a>
</div>