Pill

Pills are a small piece of information highlighted inside a coloured pill-shaped container.

Known issues

Show details

Documentation is behind development. The code includes new colours (light colours) and the documentation doesn't reflect that yet, nor the rules to use them. Please refer to this page [internal access only] if you need to track progress.

This page reflects what's on Pill v0.0.82.

Pills are informative elements that the user cannot interact with, as their primary function is to highlight a short piece of information. This means that they don't have any hover or pressed states.

Component	Usage	Placement	User action
Pill	Informative Pills should be used when we need to highlight specific context information. They work as a label.	Inside the container or overlaying another component.	The user cannot interact with pills, as they are simply informative and do not have hover/selected states.

Anatomy

Structure

	1. icon 2. label

icon	Will provide further context (visual cue) to the user
label	Should be short and concise

Sizes and Spaces

	When the pill is solely composed of an icon, it has the same padding all around. 1. The xs pill has a 12px icon and 2px padding. 2. The s pill has a 16px icon and 4px padding. 3. The m pill has a 24px icon and 4px padding.
	When the pill is solely composed of text, it has symmetrical padding. 1. The xs pill has 6px left and right, and 2px top and bottom. 2. The s pill has a 12px left and right, and 4px top and bottom. 3. The m pill has a 16px left and right, and 4px top and bottom.
	When the pill is solely composed of an icon and a label, the paddings and spacing vary. 1. The xs pill has 4px left, 6px right, 2px top and bottom. The label is 4px apart from the icon. 2. The s pill has 8px left, 12px right, 4px top and bottom. The label is 6px apart from the icon. 3. The m pill has 12px left, 16px right, 4px top and bottom. The label is 8px apart from the icon.

Properties

Property	Value	Description
Style	primary secondary archive alert fail success notification disabled	The style can be chosen to convey status. For that purpose, the system colours (alert, fail, success, notification, disabled) will fit best.
Size	xs s m	---
Label	true false	---
Icon	true false	---

Behaviour

Interaction

The user cannot interact with the pill.

Responsiveness

The pill's width and height will adjust to its content. The only rule is that there will be an ellipsis in case of overflow.

Pill responsiveness

Max-width on each breakpoint

Component	Extra-large >1366px	Large 1366px	Medium 1024px	Small 768px	Extra-small 428px
Pill w/o label	Not defined	Not defined	Not defined	Not defined	Not defined
Pill w/ label	280px	280px	280px	280px	280px

Guidelines