DOTD Component Library

Badge: Default 

<div class="o-badge">
    <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"
  }
}
  • Content: 
    /* ------------------------------------ *\
  $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);
  }
}
  • URL: /components/raw/badge/_badge.scss
  • Filesystem Path: components/01-atoms/badge/_badge.scss
  • Size: 982 Bytes

No notes defined.