Badge

Badge is used to tag entities with concise and relevant information.

Usage
Code

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


Appearances

A badge comes in 9 appearances and 2 styles each.

Solid style

Solid style is used to highlight important information on the page so that they can be recognized easily. Solid style helps the badge to easily pop out in a page.


Subtle style

Subtle style is 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.

Structure



Structure of badge
PropertyValue(s)
Height20 px
Max width160 px
Corner radius4 px
Padding
(top, right, bottom, left)
2 px, 4 px, 2 px, 4 px

Configurations



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

    Usage


    Spacing between badges

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

    Spacing between badges 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

    Was this page helpful?