DOTD Component Library

Button: With Icon And External Link 

<a class="o-button" href="#">
        <span class="o-button__label">
            Button
            <span class="o-icon o-button__icon-external-link">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.2308 21H4.38462C4.01754 20.9995 3.66565 20.8535 3.40609 20.5939C3.14653 20.3344 3.00049 19.9825 3 19.6154V5.76923C3.00049 5.40216 3.14653 5.05026 3.40609 4.79071C3.66565 4.53115 4.01754 4.38511 4.38462 4.38462H11.3077V5.76923H4.38462V19.6154H18.2308V12.6923H19.6154V19.6154C19.6149 19.9825 19.4689 20.3344 19.2093 20.5939C18.9497 20.8535 18.5978 20.9995 18.2308 21Z" />
                    <path d="M14.0769 3V4.38462H18.6365L12.6923 10.3288L13.6712 11.3077L19.6154 5.36354V9.92308H21V3H14.0769Z" />
                </svg>
            </span>
        </span>
        <span class="o-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
            </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": "Button",
    "url": "#",
    "target": "_blank",
    "icon": {
      "name": "arrow-right"
    }
  }
}
  • 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.