HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
BadgeView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorAttaches a count or a presence mark to another element.StableSince 0.1.0MarkersUsageimport'@fusion.dev/helix/badge'import'@fusion.dev/helix-headless/badge'Preview
API ReferenceRoothelix-badgeAttaches a count or a presence mark to another element.
PropTypeDefaultDescriptionlabelstring""Accessible name.maxnumberCap for a numeric value.tone"danger"|"neutral"What the mark means.valuestring""The count or short text to show.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The element being decorated.
PartDescriptionindicatorThe count, or the dot when there is no value.
CSS PropertyDescription--badge-background-colorFill of the indicator.--badge-offsetPulls the mark in from the corner, along both axes.--badge-ring-colorThe ring separating it from what is behind.
Roothelix-headless-badgeAttaches a count or a presence mark to another element.
PropTypeDefaultDescriptionlabelstring""Accessible name.maxnumberCap for a numeric value.valuestring""The count or short text to show.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The element being decorated.
PartDescriptionindicatorThe count, or the dot when there is no value.
ExamplesNameDescriptionAppearancesThe badge drawn as a count, a dot, and a standalone tag.CappedA count past its maximum, which reads as a ceiling rather than a number.DotA mark with no number, for unread rather than how many.PreviewA count over the thing it counts.PreviewA count over the thing it counts.