Pill

Pill is used to highlight the count of an item.

Usage
Code

Pill is used to highlight number of items. For status and text, use a Badge.

Appearances


Solid

Solid Pill is used to highlight number of items in reference to a particular component so that the component gets recognized easily. eg Pill over the notification icon.

Subtle

Subtle Pill is used when many pills are used in reference to a group of components. In that case, solid pills become a bit overwhelming. eg Pills in vertical navigation items.

Subtle style

Subtle style is favorable when a lot of pills have to be used to show count against entities. In that case, solid style becomes a bit overwhelming e.g. count in vertical navigation items.


Structure



Structure of pill
PropertyValue(s)
Height20 px
Max width160 px
Corner radius10 px
Padding
(top, right, bottom, left)
2px, 6px, 2px, 6px

Configurations


PropertyValue(s)Default value
Appearance
  • Jal
  • Stone
  • Neem
  • Haldi
  • Mirch
  • Tawak
  • Nimbu
  • Neel
  • Jamun
  • Stone
    Subtle
  • True
  • False
  • False

    Usage


    Pills vs Badges

    Pills are used to display count of entities while badges are used for tagging entities.

    Pills vs Badges