Version: Previous

Web Components - Badge

The badge component is used to highlight an item or flag its status.

Set-up

import { provideDesignSystem, alphaBadge } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaBadge());

Live Editor

<alpha-badge fill="primary" color="primary" class="badge">Badge</alpha-badge>

Result

The fill and color attributes of the badge create CSS custom properties, which can be used to style the control.

alpha-badge {
  --badge-fill-primary: #00ff00;
  --badge-fill-danger: #ff0000;
  --badge-color-light: #ffffff;
  --badge-color-dark: #000000;
}