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 --><spanclass="inline-flex items-center justify-center gap-1 rounded bg-emerald-500 px-1.5 text-sm text-white">
7
<spanclass="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.
Copy as:
7 new emailscopydone
7 new emailscopydone
7 new emailscopydone
<!-- Component: Rounded icon base sized badge --><spanclass="inline-flex items-center justify-center gap-1 rounded bg-emerald-500 px-1.5 text-sm text-white"><svgxmlns="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-01 desc-01"role="graphics-symbol"><titleid="title-01">User Icon</title><descid="desc-01">
User icon associated with a particular user account
</desc><pathstroke-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
<spanclass="sr-only"> new emails</span></span><!-- End Rounded icon base sized badge -->
Rounded Badge
With fully rounded corners in 3 different sizes.
Copy as:
7 new emailscopydone
7 new emailscopydone
7 new emailscopydone
<!-- Component: Rounded full basic base sized badge --><spanclass="inline-flex items-center justify-center gap-1 rounded-full bg-emerald-500 px-1.5 text-sm text-white">
7
<spanclass="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 --><spanclass="inline-flex items-center justify-center gap-1 rounded-full bg-emerald-500 px-1.5 text-sm text-white"><svgxmlns="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"><titleid="title-03">User Icon</title><descid="desc-03">
User icon associated with a particular user account
</desc><pathstroke-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
<spanclass="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.