Pill

Pill is a design system component used to display a small numerical indicator, usually positioned near another element, such as an icon or a button. It provides users with quick, at-a-glance information about counts or notifications, like unread messages or pending tasks.

Component Status

Figma

Up to date

Status

Stable

HTML

Up to date

React

Up to date

Twig

Up to date

Design Usage

  • A Pill is a small element used for highliting 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

© 2025 Spirit. Page last updated on Nov 27, 2024, 17:35