Pill
ready
Introduction
Used to provide more visual weight to a concise bit of text, usually to do with a state or flag.
Examples
Default pill
Default pill<span class="pill">Default pill</span>Negative pill
Negative pill<span class="pill pill--negative">Negative pill</span>Action pill
Action pill x<span class="pill pill--action"><span class="icon-text">Action pill</span><a href="#" class="icon icon--x-white pill__action">x</a></span>Dependencies
-
src/styles/base/*.scss -
src/styles/components/elements/_pill.scss
Usage
| Class/JavaScript Hook | Description | Required? |
|---|---|---|
.pill--negative |
Base styling for a pill element | Required |
.pill |
Applies styling that has negative associations (declined, deleted, error etc) | Optional |
.pill--action |
Applies styling for pills that have an action | Optional |
.pill__action |
Placed on icon action child element of .pill--action |
Required if using .pill--action |