<div class="o-badge o-badge--success">
<span class="o-icon o-icon--md o-badge__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17.0303 9.53033C17.3232 9.23744 17.3232 8.76256 17.0303 8.46967C16.7374 8.17678 16.2626 8.17678 15.9697 8.46967L10.5 13.9393L8.03033 11.4697C7.73744 11.1768 7.26256 11.1768 6.96967 11.4697C6.67678 11.7626 6.67678 12.2374 6.96967 12.5303L9.96967 15.5303C10.2626 15.8232 10.7374 15.8232 11.0303 15.5303L17.0303 9.53033Z" />
</svg>
</span>
<span class="o-badge__text">Badge</span>
</div>
{% set base_class = badge.base_class|default('o-badge') %}
{% if badge.modifiers == "danger" %}
{% set badge_icon = "warning" %}
{% elseif badge.modifiers == "warning" %}
{% set badge_icon = "warning-circle" %}
{% elseif badge.modifiers == "info" %}
{% set badge_icon = "info" %}
{% elseif badge.modifiers == "success" %}
{% set badge_icon = "done-circle" %}
{% endif %}
{% if badge.text %}
<div class="{{ bem(base_class, badge.element, badge.modifiers, badge.extra) }}" {{ attributes(badge.attributes) }}>
{% include "@icon" with {
"icon": {
"name": badge_icon,
"modifiers": "md",
"extra": bem(base_class, 'icon')
}
} %}
{% if badge.text %}
<span class="{{ bem(base_class, 'text') }}">{{ badge.text }}</span>
{% endif %}
</div>
{% endif %}
{
"badge": {
"text": "Badge",
"modifiers": "success"
}
}
/* ------------------------------------ *\
$BADGES
\* ------------------------------------ */
.o-badge {
display: inline-flex;
padding: var(--dotd-space-xxs) var(--dotd-space-xs);
justify-content: center;
align-items: center;
gap: var(--dotd-space-xxs);
border-radius: var(--dotd-border-radius-sm);
color: var(--dotd-color-content-default);
background: var(--dotd-color-background-default-weak);
@include o-typography-body--sm;
&--warning {
color: var(--dotd-color-content-warning-default);
background: var(--dotd-color-background-warning-default);
}
&--danger {
color: var(--dotd-color-content-danger-default);
background: var(--dotd-color-background-danger-default);
}
&--info {
color: var(--dotd-color-content-info-default);
background: var(--dotd-color-background-info-default);
}
&--success {
color: var(--dotd-color-content-success-default);
background: var(--dotd-color-background-success-default);
}
}
No notes defined.