Example Component Library
Demo Components
Card
Layouts Hero
Info card Slotted card
Alert Badge Button Quote oneup Rich button User card
Demo Extra Button
Demo Nav
Cards Info card
Elements Quote oneup Badge
Icon Accessibility
Generic Divider Tooltip
Action button Design guidelines
Demo Single Chip Pill
Gallery / Demo Components / Badge Gallery / / Badge
Demo Components /
Documentation

Description

A small badge label, useful for status indicators or counts.

The simplest structural pattern: a single file with an inline template.

Note it's specifically only available in the "default" theme.

Example usage::

{% badge "New" %}

Usage

Minimal example

{% badge "New" %}

Bigger example

{% badge
  "Unread Messages"
  theme="danger"
  classes="font-bold"
%}

Qualified tag usage

{% ui__badge "New" %}

Parameters

Name Type Required Default Choices Description
text str Yes — — The badge text.
Sandbox