Skip to content

Badge

Beta 0.8Kb

Element showing a small badge on the slotted element

js
import 'pyro/badge'
Preview Code Stackblitz
Notifications

Usage

html
<pyro-badge label="3">
  Notifications
</pyro-badge>

Variations

The badge has no variations.

Props

ts
interface BadgeProps {
  /** Label */
  label?: string;
  /** Slot for label */
  children?: any;
}

Slots

ts
/**
 * @slot - One/two letter, overrides label prop
 */

CSS prop theming

Full theming sheet

js
/**
 * @prop {--pyro-badge-text-color =  --pyro-text-color} - `color`
 * @prop {--pyro-badge-accent-color = --pyro-accent-color} - `background`
 * @prop {--pyro-badge-font-size = calc(var(--pyro-badge-height, 1.5em) / 2)} - `font-size`
 * @prop {--pyro-badge-height = 1.5em} - `height`
 */