Pills

Status pills

Status pills .pill with (optional) icons and statuscolors.

Default

<span class="pill">Default</span> 

.pill.pill--success

Success

<span class="pill pill--success"><i class="bicon bicon-check-circle" aria-hidden="true"></i> Success</span> 

.pill.pill--success.pill--inverted

Success

<span class="pill pill--success pill--inverted"><i class="bicon bicon-check-circle" aria-hidden="true"></i> Success</span> 

.pill.pill--error

Error

<span class="pill pill--error"><i class="bicon bicon-times-circle" aria-hidden="true"></i> Error</span> 

.pill.pill--error.pill--inverted

Error

<span class="pill pill--error pill--inverted"><i class="bicon bicon-times-circle" aria-hidden="true"></i> Error</span> 

.pill.pill--info

Info

<span class="pill pill--info"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Info</span> 

.pill.pill--info.pill--inverted

Info

<span class="pill pill--info pill--inverted"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Info</span> 

.pill.pill--message

Message

<span class="pill pill--message"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Message</span> 

.pill.pill--message.pill--inverted

Message

<span class="pill pill--message pill--inverted"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Message</span> 

Filterbutton pills

Filterbutton pills are bigger than status pills, grey and have a fixed active color.

Filter inactive

<button type="button" class="pill pill--filter pill--big" title="Filtern">Filter inactive</button>
 

Filter active

<button type="button" class="pill pill--filter pill--big active" title="Filter löschen">Filter active <i class="bicon bicon-times" aria-hidden="true"></i></button>