D.School Component Library

Button: Icon Only Secondary 

<a class="o-button o-button--icon o-button--secondary has-icon" href="#" aria-label="Next">
    <span class="o-icon">
        <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
        </svg>
    </span>
</a>
 
{% set base_class = button.base_class|default('o-button') %}
{% set button_tag = 'button' %}
{% set button_icon = 'arrow-right' %}

{% if button.external %}
  {% set button_icon = 'external-link' %}
{% elseif button.download %}
  {% set button_icon = 'download' %}
{% endif %}

{% if button.url %}
  {% set button_tag = 'a' %}
{% endif %}
{% if button.arrow or button.icon %}
  {% set button_class = ' has-icon' %}
{% endif %}
{% if button.url or button.text or button.icon %}
  <{{ button_tag }} class="{{ bem(base_class, button.element, button.modifiers, button.extra) }}{{ button_class }}"{{ 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 }}
      </span>
    {% endif %}
    {% if button.arrow %}
      {% include "@icon" with {
        "icon": {
          "name": button_icon
        }
      } %}
    {% else %}
      {% include "@icon" with button %}
    {% endif %}
  </{{ button_tag }}>
{% endif %}
 
{
  "button": {
    "text": "",
    "url": "#",
    "target": "",
    "modifiers": [
      "icon",
      "secondary"
    ],
    "arrow": "true",
    "attributes": {
      "aria-label": "Next"
    }
  }
}
  • Content: 
    /* ------------------------------------ *\
  $BUTTONS
\* ------------------------------------ */

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

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

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

No notes defined.