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

Available

React

Available

Twig

Available

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

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