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 13
--border
--destructive
--destructive-foreground
--foreground
--primary
--primary-foreground
--radius
--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>