<button class="Button focus"><span>Boop this</span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
    </svg></button>
{% set buttonClass = style is defined and style is not empty ? " Button--"~style  %}
{% set hasClasses = classes is defined and classes is not empty %}
{% set hasAttributes = attributes is defined and attributes is iterable %}
{% set hasLink = link is defined and link is not empty %}
{% set hasArrow = arrow is defined and arrow %}
{% set attrs = '' %}
{% if hasAttributes %}
{% for key in attributes|keys %}
  {% set attrs = attrs ~ ' ' ~ key ~ '="' ~ attributes[key] ~ '"' %}  
{% endfor %}
{% endif %}

{% apply spaceless %}
{% if hasLink %}
  <a href="{{link}}" class="Button focus{{ buttonClass }}{{ hasClasses ? ' ' ~ classes }}" {{ hasAttributes ? attrs|raw}}>
{% else %}
  <button class="Button focus{{ buttonClass }}{{ hasClasses ? ' ' ~ classes }}" {{ hasAttributes ? attrs|raw }}>
{% endif %}
    <span>{{text}}</span>
    {% if hasArrow %}
      {% include "@icon" with { id: 'arrow-right', size: 's' } %}
    {% endif %}
{% if hasLink %}
  </a>
{% else %}  
  </button>
{% endif %}
{% endapply %}
{
  "text": "Boop this",
  "arrow": true
}
  • Content:
    .Button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(--dark);
      outline: none;
      border: none;
      color: var(--white);
      font-size: var(--step--1);
      font-weight: 700;
      padding: 1rem 2rem;
      text-align: center;
      text-decoration: none;
      overflow: hidden;
      cursor: pointer;
      min-height: 54px;
      transition: color 0.2s var(--confident-ease);
      transition-property: background-color, color, box-shadow;
    
      &[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
      }
    
      span {
        position: relative;
        z-index: 1;
        pointer-events: none;
      }
    
      svg {
        z-index: 2;
        position: relative;
        margin-left: var(--space-s);
      }
    
      &:hover {
        background-color: var(--green-step--2);
      }
    
      &:active {
        border-top: 2px solid var(--light-grey-step--2);
        background-color: var(--dark);
      }
    
      &--light {
        background-color: var(--white);
        color: var(--dark);
    
        &:hover {
          background-color: var(--green);
        }
    
        &:active {
          background-color: var(--white);
        }
      }
    
      &--outline {
        box-shadow: 0px 0px 0px 1px var(--dark) inset;
        background-color: var(--white);
        color: var(--dark);
    
        &:hover {
          background-color: var(--green-step-2);
          box-shadow: 0px 0px 0px 1px var(--green-step--2) inset;
          color: var(--green-step--2);
        }
    
        &:active {
          border-top: 2px solid var(--dark);
          background-color: var(--white);
          color: var(--dark);
        }
      }
    
      &--outline-light {
        box-shadow: 0px 0px 0px 1px var(--white) inset;
    
        &:hover {
          background-color: var(--green-step--2);
          box-shadow: 0px 0px 0px 1px var(--green-step-2) inset;
          color: var(--green-step-2);
        }
    
        &:active {
          border-top: 2px solid var(--white);
          background-color: var(--dark);
          color: var(--white);
        }
      }
    }
    
  • URL: /components/raw/button/button.css
  • Filesystem Path: src/templates/components/button/button.css
  • Size: 1.9 KB

No notes defined.