Components / Badge

Badge

Compact status or metadata content with neutral variants and an optional icon slot.

Ready

In review

Draft

example.component.html

html

<aevko-badge variant="muted">
  In review
</aevko-badge>

Installation

npx aevko-ui@latest add badge --yes

Source ownership

Choose a neutral variant, project any icon implementation and override compact spacing through local CSS.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

Property or slot	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'muted' \| 'danger'`	`'default'`	Visual status hierarchy.
`aevkoBadgeIcon`	`projected slot`	`empty`	Optional leading SVG, image or component.
`content`	`projected content`	`required`	Visible status or metadata label.

Accessibility contract

The badge adds no live semantics; its text remains available to assistive technology.

Keep meaningful status text in the badge and do not rely on its color or icon alone.