Badge beta

A badge is a visual element, displaying concise information like notifications or statuses. It can appear as a box or circle near relevant UI elements, offering quick feedback without taking up much space.

Default

To create a badge, add an element within the opening and closing <ch-badge> tags.

<ch-badge>Badge</ch-badge>

Style

Badge has css properties that will help you customize the badge.

Customizing the background color, use --badge-bg-color.

ch-badge {
  --badge-bg-color: blue;
}

Customizing the border, use --badge-bg-color, --badge-border-radius, --badge-border-solid and --badge-border-width.

ch-badge {
  --badge-border-color: blue;
  --badge-border-radius: 6px;
  --badge-border-style: solid;
  --badge-border-width: 2px;
}

Customizing the padding, use --badge-padding.

ch-badge {
  --badge-padding: 0.5em;
}

Customizing the size, use --badge-size. This is used in relation to the font.

ch-badge {
  --badge-size: 32px;
}

API