Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.7.0
Badge

A badge is used to highlight the status, count, or other important characteristics of an object.

Properties
Style
Size
Content
Usage examples
Badge list

Badges can be displayed in a row or in a column.

Tooltip with explanation

On hover or focus, a tooltip with an explanation or additional information can be shown.

In a table

The label inside the badge is aligned to the text baseline in a table.

Recommendations
  • Badges can be used on their own, while tags are more often part of other controls: Select, Tag autocomplete, Tag input.
  • Don't overuse badges: the screen quickly turns into a colorful garland and emphasis is lost.
  • A list of tags can draw excessive attention. Elements can be displayed separated by commas, interpuncts, or small indentation.
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.