Badge

Implemented Display

Solid, tinted, outline and dot status labels.

Kumo reference: kumo-ui.com/components/badge/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Primary

Primary Secondary Error Success Warning Info Outline Beta

Show template

{% load wdj %}
<div class="flex flex-wrap gap-2">
  {% include "wdj/components/badge.html" with label="Primary" variant="primary" only %}
  {% include "wdj/components/badge.html" with label="Secondary" variant="secondary" only %}
  {% include "wdj/components/badge.html" with label="Error" variant="error" only %}
  {% include "wdj/components/badge.html" with label="Success" variant="success" only %}
  {% include "wdj/components/badge.html" with label="Warning" variant="warning" only %}
  {% include "wdj/components/badge.html" with label="Info" variant="info" only %}
  {% include "wdj/components/badge.html" with label="Outline" variant="outline" only %}
  {% include "wdj/components/badge.html" with label="Beta" variant="beta" only %}
</div>

Secondary

Show template

{% load wdj %}
{% include "wdj/components/badge.html" with label="Secondary" variant="secondary" only %}

Success

Show template

{% load wdj %}
{% include "wdj/components/badge.html" with label="Success" variant="success" only %}

Error

Show template

{% load wdj %}
{% include "wdj/components/badge.html" with label="Error" variant="error" only %}

Warning

Show template

{% load wdj %}
{% include "wdj/components/badge.html" with label="Warning" variant="warning" only %}

Outline

Show template

{% load wdj %}
{% include "wdj/components/badge.html" with label="Outline" variant="outline" only %}

Dot appearance

Active

Show template

{% load wdj %}
{% include "wdj/components/badge.html" with label="Active" variant="success" appearance="dot" only %}

With icon

Protected

Show template

{% load wdj %}
{% include "wdj/components/badge.html" with label="Protected" variant="secondary" icon="shield" only %}

Complete color variants

info beta red green neutral orange purple teal teal-subtle blue

Show template

{% load wdj %}
{% for variant in audit_badges %}{% include "wdj/components/badge.html" with variant=variant label=variant only %}{% endfor %}

All dot states

success warning error neutral

Show template

{% load wdj %}
{% for variant in audit_dot_badges %}{% include "wdj/components/badge.html" with variant=variant appearance="dot" label=variant only %}{% endfor %}

In a sentence

Workers New

Show template

{% load wdj %}
<p>Workers {% include "wdj/components/badge.html" with label="New" variant="secondary" only %}</p>

Linked badge

View guide

Show template

{% load wdj %}
<a href="/guide/">{% include "wdj/components/badge.html" with label="View guide" variant="outline" only %}</a>

API Reference

Prop	Type	Default	Description
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
variant	string	component-specific	Variant; pass the documented value shown in the examples.
appearance	string	unset	Checkbox: card or default. Radio: default/card/segmented. Badge: filled/dot.
icon	string	unset	Icon; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract