Badges

Badges are used to tag entities with concise and relevant information.

Usage
Code

Badges contain short labels that help in ‘tagging’ entities. The container of a badge is rounded at the corners.


Types


Solid

Solid badges are used to highlight important information on the page so that they can be recognized easily. They use solid color to easily pop out in a page.

Subtle

Subtle badges are used when a lot of entities on a single page need tagging/labeling. In that case, using solid badges becomes a bit overwhelming e.g. tags in a list. This is why subtle badges use the lightest shade of the colors.


Appearances

A badge comes in 9 appearances.


Properties

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

    Usage


    Spacing between badges

    Badges should maintain a minimum spacing of 8px from the content on either side.

    Spacing between badges

    Badges vs Pills

    Badges are used for tagging entities while pills are used to display count of entities.

    When to use badges vs pills