Pills

Status pills

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

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

.pill.pill--success

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

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

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

.pill.pill--error

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

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

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

.pill.pill--info

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

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

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

.pill.pill--message

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

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

Message
HTML
<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.

HTML
<button type="button" class="pill pill--filter pill--big" title="Filtern">Filter inactive</button>
HTML
<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>