A badge is a visual indicator that draws attention to an interface element. It enhances the component to which it is attached with additional information.
3 new emails 3 new emails 3 new emails
Variations
Basic Badge
With rounded corners in 3 different sizes.
Copy as:
7 new emailscopydone
7 new emailscopydone
7 new emailscopydone
<!-- Component: Rounded basic base sized badge -->
<span class="inline-flex items-center justify-center gap-1 rounded bg-emerald-500 px-1.5 text-sm text-white">
7
<span class="sr-only"> new emails</span>
</span>
<!-- End Rounded basic base sized badge -->
Basic Badge with Icon
With rounded corners and assistive icon in 3 different sizes.
<!-- Component: Rounded full basic base sized badge -->
<span class="inline-flex items-center justify-center gap-1 rounded-full bg-emerald-500 px-1.5 text-sm text-white">
7
<span class="sr-only"> new emails</span>
</span>
<!-- End Rounded full basic base sized badge -->
Rounded Badge with Icon
With fully rounded corners and assistive icon in 3 different sizes.
Copy as:
7 new emailscopydone
7 new emailscopydone
7 new emailscopydone
<!-- Component: Rounded full icon base sized badge -->
<span class="inline-flex items-center justify-center gap-1 rounded-full bg-emerald-500 px-1.5 text-sm text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-03 desc-03" role="graphics-symbol">
<title id="title-03">User Icon</title>
<desc id="desc-03">
User icon associated with a particular user account
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
7
<span class="sr-only"> new emails</span>
</span>
<!-- End Rounded full icon base sized badge -->
Usage
A Badge is a small numerical value or status descriptor for UI elements. Use the Badge Component Symbol to draw attention to another interface element or to display a notification (ie unread messages next to en email icon). It enhances the component to which it is attached with additional information.
Specs
Badges scale in 3 sizes from base to small and extra small and come both in normal or full rounded shapes.
A screen reader only inner text, provides information on the badge's notification functionality. On the variations with the icon, an aria-hidden attribute is added to completely exclude them from the accessibility tree since the icons are purely decorative.