DOTD Component Library

Button: Tertiary 

<a class="o-button o-button--tertiary" href="#">
        <span class="o-button__label">
            Button
        </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": "#",
    "modifiers": "tertiary"
  }
}
  • 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.