Pills
A pill is a small label that acts as an attribute or action. Use them to highlight an item's status for quick recognition or to visually label UI objects for quick navigation.
Basic
Use basic pills by default and in places where they may dominate the screen due to abundance, like long tables. Pills increase the amount of visual noise, especially when combined with other labeling elements, so use them in moderation. Colors are assigned via pill type class.
Pills can be static text, links or buttons, depending on the use case.
<div class="qw-pill qw-pill_danger"><span>Danger</span></div>
<div class="qw-pill qw-pill_brand"><span>Brand</span></div>
<div class="qw-pill qw-pill_warning"><span>Warning</span></div>
<div class="qw-pill qw-pill_success"><span>Success</span></div>
<div class="qw-pill qw-pill_primary"><span>Primary</span></div>
<div class="qw-pill qw-pill_accent"><span>Accent</span></div>
<div class="qw-pill qw-pill_default"><span>Default</span></div>
<a href="#" class="qw-pill qw-pill_default"><span>Default</span></a>
<button type="button" class="qw-pill qw-pill_default"><span>Default</span></button>
Border
A border adds a bit more prominence to a pill, so use in moderation. To add a border, add the .qw-pill_border class to the .qw-pill.
Bold
To add a significant amount of visual prominence to a pill, use a high contrast pill. To make a pill high contrast, add the .qw-pill_bold class to the .qw-pill.
Do not use bold and borders together on pills.
Rounded
When displaying a solitary pill, it can appear to be very similar to a button. Use a rounded pill to differentiate a single, standalone pill from buttons. To make the pill rounded, add the .qw-pill_round class to the .qw-pill.
Key/Value pairs
Key/value pairs can be shown in a pill. Wrap each value in a separate span within the .qw-pill
Maximum length
To prevent pills from being too long/wide, a maximum width of 200px is applied to all child elements. This includes each part of a key/value pair pill.
Removing Pills
Pills can be persistent or removable. Being removable allows for filters or selections within an interface to be modified. Removable pills must indicate their function accessibly (both visually and via text).
<button type="button" class="qw-pill qw-pill_default">
<span class="sr-only">Remove</span>
<span>Removable Pill</span>
<span class="fa fa-close ml-2 qw-pill_close"></span>
</button>