Pills

Pills are used to highlight number of items.

Usage
Code

Pills are used to highlight number of items. For status and text, use a Badge.

Types


Solid

Solid Pills are 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 Pills are 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.

Appearance

A pill comes in 9 appearances.

Properties


PropertyValue(s)Default value
Appearance
  • Jal
  • Stone
  • Neem
  • Haldi
  • Mirch
  • Tawak
  • Nimbu
  • Neel
  • Jamun
  • Stone
    Subtle
    (optional)
  • True
  • False
  • -
    Max width160px-
    Corner radius20px-
    Padding
    (top, right, bottom, left)
    2px, 6px, 2px, 6px-

    Usage


    Pills vs Badges

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

    Pills vs Badges