Pyro

Appearance

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`
 */