Badge

The same scenarios, parameters and interactions as Cedar. Only component prefixes differ; themes and site shells remain independent.

Examples

Basic usage

Inline and standalone

Dot badges

Custom content

Maximum and zero

Statuses and colors

Five sizes

Positions and offsets

Show and hide

Solid and outline

API

Props

Prop	Description	Type	Default
description	Fallback description text	string	-
content	Badge content	number | string	-
max	Numeric overflow shows max+; strings are not capped	number	99
dot	Display a dot	boolean	false
offset-x	Horizontal offset; ignored in inline mode	number	0
offset-y	Vertical offset	number	0
color	Custom color; outline uses it for border and text	string	-
text-color	Content text color	string	-
mode	Layout mode	'floating' | 'inline'	floating
position	Physical floating position, unchanged in RTL	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'left' | 'right'	top-right
inline-position	Logical inline position	'start' | 'end'	end
size	Size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	md
status	Semantic status	SemanticStatus	danger
show	Show the badge	boolean	true
show-zero	Show numeric zero	boolean	false
variant	Appearance	'outline' | 'default'	default

Events

No component-defined events.

Slots

Slot	Description	Arguments
default	Wrapped content; overrides description	—
content	Custom badge content	—

Methods

No public methods.

Platform notes

Props and slots match. Without a default slot or description, the badge becomes standalone inline content. Omitted content displays a dot. Direction, theme and CSS prefix come from each platform.

Types

type SemanticStatus = 'default' | 'success' | 'warning' | 'danger' | 'info' | 'primary' | 'secondary' | 'tertiary'
type BadgeVariant = 'default' | 'outline'
type BadgeMode = 'floating' | 'inline'
type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'left' | 'right'
type BadgeInlinePosition = 'start' | 'end'
type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

Style Variables

Common

Name	Default
--c-badge-font-weight	500
--c-badge-bg-color	#ef4444
--c-badge-text-color	#ffffff
--c-badge-description-text-color	var(--c-color-text-1)

Size (xs / sm / md / lg / xl)

Name
--c-badge-size-{size}-font-size
--c-badge-size-{size}-scale
--c-badge-size-{size}-dot-width / -dot-height
--c-badge-size-{size}-padding
--c-badge-size-{size}-height
--c-badge-size-{size}-border-radius
--c-badge-size-{size}-space
--c-badge-description-size-{size}-font-size

Status (default / info / success / warning / danger / primary)

Name
--c-badge-status-{status}-bg-color
--c-badge-status-{status}-text-color
--c-badge-variant-outline-status-{status}-text-color

The default status="danger" uses a red background with white text. Explicit status="default" uses neutral colors. All five sizes (xs | sm | md | lg | xl) are implemented.