DOTD Component Library

Button: Icon Only 

<a class="o-button o-button--icon" href="#" aria-label="Close">
        <span class="o-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.2373 12L19 6.23734L17.7627 5L12 10.7627L6.23751 5L5 6.23734L10.7627 12L5 17.7627L6.23751 19L12 13.2373L17.7627 19L19 17.7627L13.2373 12Z" />
            </svg>
        </span>
    </a>
 
{% set base_class = button.base_class|default('o-button') %}
{% set button_tag = 'button' %}
{% if button.url %}
  {% set button_tag = 'a' %}
{% endif %}
{% if button.url or button.text or button.icon %}
  <{{ button_tag }} class="{{ bem(base_class, button.element, button.modifiers, button.extra) }}"{{ button.url ? ' href="' ~ button.url ~ '"' }}{{ button.target == ' _blank' ? ' target="_blank" rel="noreferrer"' }}{{ button.disabled == true ? " disabled" }} {{ attributes(button.attributes) }}>
    {% if button.text %}
      <span class="{{ bem(base_class, 'label') }}">
        {{ button.text }}
        {% if button.target == "_blank" %}
          {% include "@icon" with {
            "icon": {
              "name": "external-link",
              "extra": bem(base_class, 'icon-external-link')
            }
          } %}
        {% endif %}
      </span>
    {% endif %}
    {% include "@icon" with button %}
  </{{ button_tag }}>
{% endif %}
 
{
  "button": {
    "text": "",
    "url": "#",
    "target": "",
    "modifiers": "icon",
    "icon": {
      "name": "close"
    },
    "attributes": {
      "aria-label": "Close"
    }
  }
}
  • Content: 
    /* ------------------------------------ *\
  $BUTTONS
\* ------------------------------------ */

button,
input[type="submit"],
.o-button {
  @include o-button;
}

.o-button--secondary {
  @include o-button--secondary;
}

.o-button--tertiary {
  @include o-button--tertiary;
}

.o-button--icon {
  @include o-button--icon;
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: components/01-atoms/button/_button.scss
  • Size: 325 Bytes

No notes defined.