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
Success
Neutral
Warning
Danger
< cs-badgevariant = " brand" > </ cs-badge> < cs-badgevariant = " success" > </ cs-badge> < cs-badgevariant = " neutral" > </ 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
< 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 = " 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
Success
Neutral
Warning
Danger
< cs-badgevariant = " brand" pill > </ cs-badge> < cs-badgevariant = " success" pill > </ cs-badge> < cs-badgevariant = " neutral" 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.
< divclass = " badge-attention" > < cs-badgevariant = " brand" attention = " pulse" pill > </ cs-badge> < cs-badgevariant = " success" attention = " pulse" pill > </ cs-badge> < cs-badgevariant = " neutral" 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 = " success" attention = " bounce" pill > </ cs-badge> < cs-badgevariant = " neutral" 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 --pulse-color custom property to color the pulse independently of the badge’s variant.
< cs-badgevariant = " neutral" attention = " pulse" pill style = " --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
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 --pulse-colorThe color of the badge's pulse effect when using attention="pulse". —
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)
