Badge Component API

Quick Start

Add colorful badges to highlight status, counts, or labels. Just include the CSS and add classes to your elements.

Primary Success Warning Danger Info Secondary

Primary
Success
Warning
Danger
Info

Pro Tip: Badges can be used on any element - , <a>, or even <button>. Links and buttons are automatically styled as clickable.

Class	Description
`.rsl-badge`	Base badge class. Required on all badges.

Class	Description	Preview
`.rsl-badge-primary`	Primary brand color (purple/blue gradient)	Primary
`.rsl-badge-secondary`	Neutral gray color	Secondary
`.rsl-badge-success`	Green for positive states	Success
`.rsl-badge-warning`	Orange/amber for warnings	Warning
`.rsl-badge-danger`	Red for errors/destructive	Danger
`.rsl-badge-info`	Cyan/teal for informational	Info
`.rsl-badge-light`	Light background with dark text	Light
`.rsl-badge-dark`	Dark background with light text	Dark

Class	Description	Preview
`.rsl-badge-outline`	Transparent background with border	Outline
`.rsl-badge-subtle`	Soft background with matching text	Subtle
`.rsl-badge-glass`	Frosted glass effect (works best on dark backgrounds)	Glass

Class	Description	Preview
`(default)`	Pill shape (fully rounded)	Pill
`.rsl-badge-rounded`	Slightly rounded corners	Rounded
`.rsl-badge-square`	No border radius	Square
`.rsl-badge-circle`	Circle (for single characters)	5

Class	Description	Preview
`.rsl-badge-dot`	Minimal dot indicator
`.rsl-badge-status`	Status badge with indicator dot	Online
`.rsl-badge-pulse`	Adds pulse animation	Live
`.rsl-badge-counter`	Optimized for number counters	42
`.rsl-badge-dismissible`	Can be dismissed by user	Dismiss me

For interactive badges (dismissible, counters), include badge.js and use the following methods:

Method	Parameters	Description
`RSL.Badge.init()`	None	Initialize all badges with `data-rsl-badge`
`RSL.Badge.create(element)`	`element`: HTMLElement	Initialize a specific badge
`RSL.Badge.dismiss(element, animate)`	`element`: HTMLElement, `animate`: boolean (default: true)	Programmatically dismiss a badge
`RSL.Badge.setCounter(element, value, max)`	`element`: HTMLElement, `value`: number, `max`: number (default: 99)	Set counter value. Shows "max+" if exceeded.
`RSL.Badge.incrementCounter(element, amount)`	`element`: HTMLElement, `amount`: number (default: 1)	Increment counter by amount
`RSL.Badge.decrementCounter(element, amount)`	`element`: HTMLElement, `amount`: number (default: 1)	Decrement counter (minimum 0)
`RSL.Badge.toggle(element, visible)`	`element`: HTMLElement, `visible`: boolean (optional)	Toggle badge visibility with animation

Event	Detail	Description
`rsl-badge-dismiss`	`{ badge: HTMLElement }`	Fired when badge is dismissed. Cancelable.
`rsl-badge-counter-change`	`{ value: number, max: number }`	Fired when counter value changes.

Badges can be configured via data attributes for JSON API V2 compatibility:

Attribute	Values	Description
`data-rsl-badge`	(presence)	Marks element for JavaScript initialization
`data-variant`	primary, secondary, success, warning, danger, info, light, dark	Color variant
`data-style`	outline, subtle, glass	Style variant
`data-size`	xs, sm, lg, xl	Size variant
`data-shape`	rounded, square, circle	Shape variant
`data-animate`	pulse, bounce, shimmer, glow	Animation type
`data-counter`	number	Initial counter value
`data-counter-max`	number (default: 99)	Maximum before showing "+"
`data-hide-zero`	(presence)	Hide counter when value is 0
`data-clickable`	true	Make badge clickable/focusable
`data-position`	top-right, top-left, bottom-right, bottom-left	Position for overlay badges

Color contrast: All badge colors meet WCAG 2.1 AA contrast requirements
Keyboard navigation: Dismissible badges can be closed with Escape key
Screen readers: Dismiss buttons have aria-labels; use visually-hidden text for context when needed
Reduced motion: Animations are disabled when prefers-reduced-motion is set
Focus states: Clear focus indicators on interactive badges

Best Practice: When using badges for status, include the status in text form, not just color. For example:  Approved

RSL Badges work in all modern browsers:

The .rsl-badge-glass variant uses backdrop-filter which may not work in older browsers (graceful degradation applies).

View examples.html for comprehensive demos

Test features in playground.html