Pills
Status pills
Status pills .pill
with (optional) icons and statuscolors.
<span class="pill">Default</span>
.pill.pill--success
<span class="pill pill--success"><i class="bicon bicon-check-circle" aria-hidden="true"></i> Success</span>
.pill.pill--success.pill--inverted
<span class="pill pill--success pill--inverted"><i class="bicon bicon-check-circle" aria-hidden="true"></i> Success</span>
.pill.pill--error
<span class="pill pill--error"><i class="bicon bicon-times-circle" aria-hidden="true"></i> Error</span>
.pill.pill--error.pill--inverted
<span class="pill pill--error pill--inverted"><i class="bicon bicon-times-circle" aria-hidden="true"></i> Error</span>
.pill.pill--info
<span class="pill pill--info"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Info</span>
.pill.pill--info.pill--inverted
<span class="pill pill--info pill--inverted"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Info</span>
.pill.pill--message
<span class="pill pill--message"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Message</span>
.pill.pill--message.pill--inverted
<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.
<button type="button" class="pill pill--filter pill--big" title="Filtern">Filter inactive</button>
<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>