Badge

bk-badge: a status label: 4 variants × 8 colors, an optional dot, a removable "×" that emits clicked with the label, and custom colors when none of the presets fit.

bk-badgeLabels and statusAngular

Preview

A working preview of Badge in the Brickclay style. Try it.

GrayPrimaryErrorWarningOrangeSuccessPurpleCyan

ActiveDesign Data Custom

Interact with the preview to see events here.

Interactive playground

<bk-badge
  label="New"
  variant="Light"
  color="Primary"
></bk-badge>

Event log

Turn on "removable" and click the × to see clicked fire.

API reference

Input	Type	Default	Description
`label`	`string`	`''`	Text.
`variant`	`BadgeVariant`	`'Light'`	Light, Solid, Outline, Transparent.
`color`	`BadgeColor`	`'Gray'`	Gray, Primary, Error, Warning, Orange, Success, Purple, Cyan.
`size`	`BadgeSize`	`'md'`	xsm, sm, md, lg.
`dot`	`'left' \| 'right' \| 'none'`	`'none'`	Status dot position.
`removable`	`boolean`	`false`	Shows a × that emits clicked.
`customBg / customBorder / customText`	`string`	–	Any CSS color. Set one or more to bypass color/variant entirely and paint the badge with exact colors.
`clicked`	`EventEmitter<string>`	output	Emits the label when the × is clicked.