Badge and Tag

  • Badge: Badges show the count of some adjacent data. A dot badge notifies the user that something is new or updated without showing a count. For numerical counts, use a badge.

  • Tag: Tags visually label items with small amounts of information or the item’s status, usually with keywords that help organize and categorize the items. They may be persistent or dismissable. Dismissable tags can be added or removed by users. If you need a text label, use tags.

When to use

  • For numerical counts, use a badge
    • Use badges for counts of important information, close to the relevant item.
    • A dot badge notifies the user that something is new or updated without showing a count, such as an “unread report”, or activity notification.
  • If you need a text label, use a tag.
    • Use tags when you have data that helps categorize and organize things.

External links