Badge

API reference and demos for Badge.

Source

Import

import { Badge } from "@flanksource/clicky-ui/data";

Demos

Playground · Open in Storybook

Overview · Open in Storybook

Legacy Matrix · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
borderColor	string	—	Custom border color or utility class.
children	ReactNode	—	Fallback content for simple badges.
className	string	—	Classes applied to the badge root.
clickToCopy	boolean	—	Copies the plain-text badge value when clicked.
color	string	—	Custom background color or utility class.
count	number	—	Optional numeric count rendered as badge content.
href	string	—	When set, renders the badge as a link.
icon	string | ComponentClass<any, any> | FunctionComponent<any>	—	Iconify name or imported icon component rendered before the label.
label	ReactNode	—	Label segment for structured label/value badges.
labelClassName	string	—	Classes applied to the label segment.
maxWidth	string | number	—	Maximum width before truncation; numbers are treated as character count.
rel	string	—	Link rel attribute for linked badges.
shape	enum	—	Corner treatment for the badge frame.
size	enum	md	Density-aware badge size.
status	enum	—	Status palette used by `variant="status"`.
target	HTMLAttributeAnchorTarget	_self	Link target for linked badges.
textColor	string	—	Custom text color or utility class.
tone	enum	—	Semantic color tone for legacy badge variants.
truncate	enum	—	Truncation strategy for long values.
value	ReactNode	—	Value segment for structured label/value badges.
valueClassName	string	—	Classes applied to the value segment.
variant	enum	—	Visual variant. Legacy variants are `soft`, `solid`, and `outline`; rich variants add structured label/value layouts.
wrap	boolean	false	Allows long label/value content to wrap instead of truncating.