Figma
Component Status
Up to date
Status
Stable
HTML
Up to date
React
Up to date
Design Usage
A Pill is a compact, rounded element used to display a short label or a count. Unlike Tag, which is more status-oriented, Pill is typically used for categorization, highlighting attributes, or showing numeric values (e.g., counts of items, categories).
When to Use
- To display a count (e.g., “12” next to a filter or category).
- To highlight a short attribute of an item (e.g., “New”, “Pro”).
- For status indication (success, warning, error, info) – similar to Tag.
- To categorize or group content visually in a compact way.
- When you want a more neutral, container-like style than a Tag.
When Not to Use
- For longer text or descriptions – use Tag inline copy or supporting text instead.
- For status indication (success, warning, error, info) – use Alert or Toast.
Best Practices
There are general recommendations which doesn’t have to be tightly coupled to our implementation. If you find that some features are missing, please contact the Spirit team.
- A Pill is a small element used for highlighting of events that can be notified with a single number.
- It is a very distinctive element, attracting the user's attention. Therefore, it is good to use it as little as possible.
- Keep labels very short (1–2 words or numbers).
- Use Pills consistently within a context (e.g., all category labels, or all counts).
- Place Pills close to the element they describe (e.g., right next to filter names, section headers).
- Avoid overuse – too many Pills on screen can create clutter.
- If displaying numbers, ensure the formatting is clear and consistent (e.g., “1 234” vs. “1234”).