Intro
You can use badges to display important information about the card status, such as New, Updated, or :icon-pushpin-off(pinned).
When to Use
Do
Use card badges:
- To display important information about the card status at a glance.
Don't
Don’t use card badges:
- To show an object status.
- To show tags.
Examples
Use a short and clear text to avoid truncation.
Don’t phrase the badge text as a sentence and avoid using too many words.
Use the badge to show a card status, like 'New', 'Updated', or 'Pinned'.
Don’t use badges to display tags or an object status. Don't use semantic colors.
Anatomy: Badge on the card canvas (left), example of a card with a badge (right)
Anatomy
- Card Canvas: The card canvas is the visual base of a card.
- Badge: The badge is placed on the top right corner of the card canvas. It can contain a text, an icon, or both an icon and a text. Badges are non-interactive.
Types
Examples of different badge variants on a card
- The badge can contain text, an icon, or an icon and text.
- The badge on cards consumes all indication color sets. Don’t use semantic colors on badges for cards.
- You can display up to two badges per card.
Behavior and Interaction
When badges appear and disappear can be determined by the application or by the user’s interaction with the card.
Case 1: Application determines when a badge appears/disappears
Example:
- The New badge appears when the card is shown on the page for the first time.
- On an interactive card, the badge vanishes following the user’s initial interaction. This might be clicking the card, interacting with its elements, or keyboard focus actions.
- If the card and its elements are non-interactive, the application can set different conditions to regulate when the badge disappears (for example, after a designated number of days).
Example: Appearance and disappearance of a 'New' badge
Case 2: User interaction determines when a badge appears/disappears
Example:
- A “pinned” badge :icon-pushpin-offappears after the user selects Pin to Top from the context menu.
- The badge disappears after the user selects Unpin from the context menu.
Example: Appearance and disappearance of a 'Pinned' badge
Case 3: A combination of case 1 and case 2
Example:
- The card has a :icon-pushpin-off(pinned) badge.
- An additional Updated badge appears after the card is updated.
Example: Two badges on one card
Responsive Behavior
Truncation
The text on a card badge truncates when there’s not enough space. Wrapping isn’t allowed.
Minimum/Maximum Badge Width
- Minimum width: 1.375 rem (results in 22 px)
- Maximum width: Corresponds to the width of the card (see truncation example below)
Examples
Responsive behavior of badges on a card
- One badge with long text: When space is limited, the badge text truncates.
- T wo badges, one icon-only badge: When space is limited, the badge text truncates. The icon-only badge never truncates.
- Two badges, both with text: When space is limited, the longer text begins to truncate until its width aligns with the shorter text. Subsequently, the shorter text also truncates if necessary.
Related Links
Components
Specifications
- Card Canvas Badge (visual design)
- Badge in the Web Card System (interaction design)