Button

<a class="btn btn-primary active" href="#" aria-pressed="true">
    Primary
</a>
{% set typeClass = header_layout ? ' btn-' ~ header_layout : ' btn-primary' %}
{% set sizeClass = header_style ? ' btn-' ~ header_style : '' %}
{% set blockClass = button_display_block ? ' btn-block' : '' %}
{% set disabledAttribute = disabled ? ' disabled' : '' %}
{% set ariaPressedAttribute = active ? ' aria-pressed="true"' : '' %}
{% set activeClass = active ? ' active' : '' %}

{% if href %}
    {% set tag = 'a' %}
    {% set hrefAttribute = 'href="' ~ href ~ '"' %}
    {% set disabledClass = disabled ? ' disabled' : '' %}
    {# remove disabled attribute because a tag doesn't support it #}
    {% set disabledAttribute = disabled ? '' %}
{% else %}
    {% set tag = 'button' %}
{% endif %}

{% block main %}
    <{{ tag }}
        class="btn{{ typeClass }}{{ sizeClass }}{{ blockClass }}{{
        disabledClass }}{{ activeClass }}"
        {{ hrefAttribute }}
        {{ disabledAttribute }}
        {{ ariaPressedAttribute }}>
        {{ header }}
    </{{ tag }}>
{% endblock %}
{
  "header": "Primary",
  "disabled": 0,
  "button_display_block": 0,
  "header_style": null,
  "header_layout": "primary",
  "href": "#",
  "active": true
}
  • Content:
    .btn {
        font-weight: bold;
        letter-spacing: $btn-font-size/10;
    }
  • URL: /components/raw/atom-button/_button.scss
  • Filesystem Path: ../template/components/01-atoms/button/_button.scss
  • Size: 70 Bytes

No notes defined.