Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Status pill

Status pill default

#
Default 
<span class="c-status-pill c-status-pill--default">
    <span class="c-status-pill__circle"></span>
    <span class="c-status-pill__label">Default</span>
</span>
+c-status-pill({}) Default

Status pill pending

#
Pending 
<span class="c-status-pill c-status-pill--pending">
    <span class="c-status-pill__circle"></span>
    <span class="c-status-pill__label">Pending</span>
</span>
+c-status-pill({skin: 'pending'}) Pending

Status pill success

#
Success 
<span class="c-status-pill c-status-pill--success">
    <span class="c-status-pill__circle"></span>
    <span class="c-status-pill__label">Success</span>
</span>
+c-status-pill({skin: 'success'}) Success

Status pill danger

#
Refused 
<span class="c-status-pill c-status-pill--danger">
    <span class="c-status-pill__circle"></span>
    <span class="c-status-pill__label">Refused</span>
</span>
+c-status-pill({skin: 'danger'}) Refused

Status pill warning

#
Warning 
<span class="c-status-pill c-status-pill--warning">
    <span class="c-status-pill__circle"></span>
    <span class="c-status-pill__label">Warning</span>
</span>
+c-status-pill({skin: 'warning'}) Warning

Possible parameters for alerts

Parameters Type Possible values Description
skin string default, pending, success, danger, warning Determines the skin of the status pill