Badge

A badge is a label or decorative indicator used to communicate information within the UI in a highly visual way. We categorize badges into three types: those that communicate the status of a piece of content, those that provide non-actionable information, and special cases that have been designed for a specific issue.

Badge is always on one line

Labels can only contain one line of text

Text - Do
Text - Don't

Use only small icons

Do not use the size icons large or medium

Icon size - Do
Icon size - Don't

Use a maximum of two words

Keep your text brief and short, and use one or max two words.

Name length - Do
Name length - Don't

Text truncation

The badge label shouldn't be truncated in any case.

Truncation - Do
Truncation - Don't

Can't contain action

Badges can not contain any actionable element inside, e.g., remove button. This functionality is not allowed for accessibility reasons such clickable area being too tiny.

Remove - Do
Remove - Don't
Badge
Usage
Badge
Design properties
Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.

© 2026 Soul Design System. Page last updated on Mar 21, 2025, 09:12