DOTD Component Library

Button: With 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>
    </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"
  }
}
  • 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.