Badge Preview

A badge is a visual indicator that communicates a status or description of an associated component. They use short text, color, and icons for quick recognition and are placed near the relavant content.

Loading...

Properties

appearance

A Badge can be filled, outline, ghost, inverted

“filled” “ghost” “outline” “tint”
Default:
none

as

“div”
Default:
none

color

A Badge can be one of preset colors

“brand” “danger” “important” “informative” “severe” “subtle” “success” “warning”
Default:
none

icon

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

iconPosition

A Badge can position the icon before or after the content.

“before” “after”
Default:
none

shape

A Badge can be square, circular or rounded.

“circular” “square” “rounded”
Default:
none

size

A Badge can be on of several preset sizes.

“small” “tiny” “extra-small” “medium” “large” “extra-large”
Default:
none