# Core/Pill - Design

## Variants

### Default

Default pills communicate information neutral of intent.

### Info

Information pills communicate general information or an important property.

### Danger

Danger pills communicate problems that require action to be resolved.

### Warning

Warning pills can communicate information that is time-sensitive, or trending towards an 'attention' state.

### Success

Success pills communicate successful states or completed actions.

### Highlight

Highlight pills bring special attention to metadata without communicating status.

## Other properties

### Label

Labels should use short and clear messaging, in one or two words. Labels are required.

### Icon

An optional icon is available. Use solid icons.

## Style

### Bold

Pills have a bold and muted style.

* **Bold**: Can be used for isolated pills, such as when in the header of an object details page. Use bold pills with caution, since they can easily distract from the primary content. Be cautious with multiple bold pills on a single page, and absolutely avoid multiple bold pills in close proximity.
* **Muted**: Used when pills are inline with other content, such as table cells.

### Muted

Pills have a bold and muted style.

* **Bold**: Can be used for isolated pills, such as when in the header of an object details page. Use bold pills with caution, since they can easily distract from the primary content. Be cautious with multiple bold pills on a single page, and absolutely avoid multiple bold pills in close proximity.
* **Muted**: Used when pills are inline with other content, such as table cells.

### Hollow

Pills have a bold and muted style.

* **Bold**: Can be used for isolated pills, such as when in the header of an object details page. Use bold pills with caution, since they can easily distract from the primary content. Be cautious with multiple bold pills on a single page, and absolutely avoid multiple bold pills in close proximity.
* **Muted**: Used when pills are inline with other content, such as table cells.

## Best Practices

**Do**

<img src="pill-bestpractices-label-do.png" />

<p>
  Do provide label that succinctly communicates the pill's messaging.
</p>

**Don't**

<img src="pill-bestpractices-label-dont.png" />

<p>
  Don't us a pill with just an icon.
</p>

**Do**

<img src="pill-bestpractices-interaction-do.png" />

<p>
  Do use pills to message and inform the user.
</p>

**Don't**

<img src="pill-bestpractices-interaction-dont.png" />

<p>
  Don't use a tooltip or make a pill interactive.
</p>