Badges draw attention to adjacent content by displaying a status, count, or label. Use them to highlight
notifications, categorize items, or flag new activity.
< cs-badgevariant = " brand" > < cs-iconslot = " start" name = " star" variant = " fill" > </ cs-icon> < cs-iconslot = " end" name = " arrow_forward" > </ cs-icon> </ cs-badge> Code
Examples
Variant
Set the variant attribute to change the badge’s variant.
Brand
Neutral
Highlight
Information
Success
Warning
Danger
< cs-badgevariant = " brand" > </ cs-badge> < cs-badgevariant = " neutral" > </ cs-badge> < cs-badgevariant = " highlight" > </ cs-badge> < cs-badgevariant = " information" > </ cs-badge> < cs-badgevariant = " success" > </ cs-badge> < cs-badgevariant = " warning" > </ cs-badge> < cs-badgevariant = " danger" > </ cs-badge> Code
Appearance
Use the appearance attribute to change the badge’s visual appearance.
Accent
Filled-Outlined
Filled
Outlined
Accent
Filled-Outlined
Filled
Outlined
Accent
Filled-Outlined
Filled
Outlined
Accent
Filled-Outlined
Filled
Outlined
Accent
Filled-Outlined
Filled
Outlined
Accent
Filled-Outlined
Filled
Outlined
Accent
Filled-Outlined
Filled
Outlined
< divclass = " cs-stack" > < div> < cs-badgeappearance = " accent" variant = " neutral" > </ cs-badge> < cs-badgeappearance = " filled-outlined" variant = " neutral" > </ cs-badge> < cs-badgeappearance = " filled" variant = " neutral" > </ cs-badge> < cs-badgeappearance = " outlined" variant = " neutral" > </ cs-badge> </ div> < div> < cs-badgeappearance = " accent" variant = " brand" > </ cs-badge> < cs-badgeappearance = " filled-outlined" variant = " brand" > </ cs-badge> < cs-badgeappearance = " filled" variant = " brand" > </ cs-badge> < cs-badgeappearance = " outlined" variant = " brand" > </ cs-badge> </ div> < div> < cs-badgeappearance = " accent" variant = " highlight" > </ cs-badge> < cs-badgeappearance = " filled-outlined" variant = " highlight" > </ cs-badge> < cs-badgeappearance = " filled" variant = " highlight" > </ cs-badge> < cs-badgeappearance = " outlined" variant = " highlight" > </ cs-badge> </ div> < div> < cs-badgeappearance = " accent" variant = " information" > </ cs-badge> < cs-badgeappearance = " filled-outlined" variant = " information" > </ cs-badge> < cs-badgeappearance = " filled" variant = " information" > </ cs-badge> < cs-badgeappearance = " outlined" variant = " information" > </ cs-badge> </ div> < div> < cs-badgeappearance = " accent" variant = " success" > </ cs-badge> < cs-badgeappearance = " filled-outlined" variant = " success" > </ cs-badge> < cs-badgeappearance = " filled" variant = " success" > </ cs-badge> < cs-badgeappearance = " outlined" variant = " success" > </ cs-badge> </ div> < div> < cs-badgeappearance = " accent" variant = " warning" > </ cs-badge> < cs-badgeappearance = " filled-outlined" variant = " warning" > </ cs-badge> < cs-badgeappearance = " filled" variant = " warning" > </ cs-badge> < cs-badgeappearance = " outlined" variant = " warning" > </ cs-badge> </ div> < div> < cs-badgeappearance = " accent" variant = " danger" > </ cs-badge> < cs-badgeappearance = " filled-outlined" variant = " danger" > </ cs-badge> < cs-badgeappearance = " filled" variant = " danger" > </ cs-badge> < cs-badgeappearance = " outlined" variant = " danger" > </ cs-badge> </ div> </ div> Code
Size
Badges are sized relative to the current font size. You can set font-size on any badge (or an ancestor element) to change it.
Extra Small
Small
Medium
Large
Extra Large
< cs-badgevariant = " brand" style = " font-size : var ( --cs-font-size-xs) ; " > </ cs-badge> < cs-badgevariant = " brand" style = " font-size : var ( --cs-font-size-s) ; " > </ cs-badge> < cs-badgevariant = " brand" style = " font-size : var ( --cs-font-size-m) ; " > </ cs-badge> < cs-badgevariant = " brand" style = " font-size : var ( --cs-font-size-l) ; " > </ cs-badge> < cs-badgevariant = " brand" style = " font-size : var ( --cs-font-size-xl) ; " > </ cs-badge> Code
Pill
Use the pill attribute to give badges rounded edges.
Brand
Neutral
Highlight
Information
Success
Warning
Danger
< cs-badgevariant = " brand" pill > </ cs-badge> < cs-badgevariant = " neutral" pill > </ cs-badge> < cs-badgevariant = " highlight" pill > </ cs-badge> < cs-badgevariant = " information" pill > </ cs-badge> < cs-badgevariant = " success" pill > </ cs-badge> < cs-badgevariant = " warning" pill > </ cs-badge> < cs-badgevariant = " danger" pill > </ cs-badge> Code
Drawing Attention
Use the attention attribute to draw attention to the badge with a subtle animation. Supported effects are bounce, pulse and none.
1
1
1
1
1
1
1
1
1
1
1
1
1
1
< divclass = " badge-attention" > < cs-badgevariant = " brand" attention = " pulse" pill > </ cs-badge> < cs-badgevariant = " neutral" attention = " pulse" pill > </ cs-badge> < cs-badgevariant = " highlight" attention = " pulse" pill > </ cs-badge> < cs-badgevariant = " information" attention = " pulse" pill > </ cs-badge> < cs-badgevariant = " success" attention = " pulse" pill > </ cs-badge> < cs-badgevariant = " warning" attention = " pulse" pill > </ cs-badge> < cs-badgevariant = " danger" attention = " pulse" pill > </ cs-badge> </ div> < divclass = " badge-attention" > < cs-badgevariant = " brand" attention = " bounce" pill > </ cs-badge> < cs-badgevariant = " neutral" attention = " bounce" pill > </ cs-badge> < cs-badgevariant = " highlight" attention = " bounce" pill > </ cs-badge> < cs-badgevariant = " information" attention = " bounce" pill > </ cs-badge> < cs-badgevariant = " success" attention = " bounce" pill > </ cs-badge> < cs-badgevariant = " warning" attention = " bounce" pill > </ cs-badge> < cs-badgevariant = " danger" attention = " bounce" pill > </ cs-badge> </ div> < style>
.badge-attention {
margin-block-end : var ( --cs-space-m) ;
cs-badge:not(:last-of-type) {
margin-right : var ( --cs-space-m) ;
}
}
</ style> Code
Set the --cs-badge-pulse-color custom property to color the pulse independently of the badge’s variant.
< cs-badgevariant = " neutral" attention = " pulse" pill style = " --cs-badge-pulse-color : var ( --cs-color-brand-fill-loud) " > </ cs-badge> Code
Start & End Decorations
Use the start and end slots to add presentational elements like <cs-icon> alongside the badge’s label.
< cs-badge> < cs-iconslot = " start" name = " eco" > </ cs-icon> </ cs-badge> < cs-badge> < cs-iconslot = " end" name = " park" variant = " fill" > </ cs-icon> </ cs-badge> < cs-badge> < cs-iconslot = " start" name = " pets" > </ cs-icon> < cs-iconslot = " end" name = " flare" > </ cs-icon> </ cs-badge> Code
One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they’re a child of a button.
Requests
30
Warnings
8
Errors
6
< cs-buttonappearance = " filled" > < cs-badgepill > </ cs-badge> </ cs-button> < cs-buttonappearance = " filled" style = " margin-inline-start : 1rem; " > < cs-badgevariant = " warning" pill > </ cs-badge> </ cs-button> < cs-buttonappearance = " filled" style = " margin-inline-start : 1rem; " > < cs-badgevariant = " danger" pill > </ cs-badge> </ cs-button> Code
The badge’s text is part of the accessible name of the button, link or other control it is in, so the first button is named “Requests 30”. WebKit leaves out the space and names it “Requests30”, a known gap . An icon button has no text to say what its count means, so follow Icon Button With a Badge instead.
Accessibility Considerations
A badge is not a live region, so a screen reader does not announce a change to its text. If people need to hear about a change, announce it as well. That goes for a count that changes because of something the user did, such as adding an item to a cart, and for one that changes on its own, such as a new message arriving. Keep an empty <div class="cs-visually-hidden" role="status"></div> on the page, outside the button or other control the badge is in, and set its text to the new count with context, such as “3 items in cart”.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import
needed. To cherry-pick this component, use one of the following snippets.
npm
Self-Hosted
React
import '@cruglobal/cornerstone-components/components/badge/badge.js' ;
import './cornerstone/components/badge/badge.js' ;
import CsBadge from '@cruglobal/cornerstone-components/react/badge/index.js' ;
Slots
Learn more about using slots .
Name Description (default) The badge's content. endAn element, such as <cs-icon>, placed after the label. startAn element, such as <cs-icon>, placed before the label.
Attributes & Properties
Learn more about attributes and properties .
Property Attribute Description Type Default Reflects appearanceappearanceThe badge's visual appearance. 'accent' | 'filled' | 'outlined' | 'filled-outlined''accent'Yes attentionattentionAdds an animation to draw attention to the badge. 'none' | 'pulse' | 'bounce''none'Yes pillpillDraws a pill-style badge with rounded edges. booleanfalseYes variantvariantThe badge's theme variant. Defaults to brand if not within another element with a variant. 'brand' | 'neutral' | 'highlight' | 'information' | 'success' | 'warning' | 'danger''brand'Yes
CSS Custom Properties
Learn more about CSS custom properties .
Name Description Default --cs-badge-pulse-colorThe color of the badge's pulse effect when using attention="pulse". Defaults to the badge's outer color for its appearance: the fill for accent and filled, the border for outlined and filled-outlined. —
CSS Parts
Learn more about CSS parts .
Name Description CSS selector badgeThe component's outer wrapper. ::part(badge) endThe container that wraps the end slot. ::part(end) startThe container that wraps the start slot. ::part(start)
