Badge
LIVE PREVIEW 5
Default
Secondary
Success
Warning
Destructive
USAGE
{%{% endverbatim %} load theme_components {% verbatim %}%}
{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}
PROPS — REQUIRED 1
| Name | Type | Default |
|---|---|---|
text |
str |
— |
PROPS — OPTIONAL 4
| Name | Type | Default |
|---|---|---|
variant |
str |
default |
css_prefix |
str |
— |
attrs |
dict |
— |
slot_content |
str |
— |
AVAILABLE SLOTS 1
slot_content
CSS VARIABLES 24
--border
--color-bg-subtle
--color-danger
--color-danger-subtle
--color-primary
--color-success
--color-success-subtle
--color-text-secondary
--color-warning
--color-warning-subtle
--destructive
--destructive-foreground
--font-medium
--foreground
--primary
--primary-foreground
--radius
--radius-full
--secondary
--secondary-foreground
--success
--success-foreground
--warning
--warning-foreground
TEMPLATE SOURCE
<span class="{{ css_prefix }}badge {{ css_prefix }}badge-{{ variant }} {% if attrs.class %}{{ attrs.class }}{% endif %}"
{% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
{% if slot_content %}{{ slot_content|safe }}{% else %}{{ text }}{% endif %}
</span>