Button

<button type="button" class="n7-btn 
    n7-btn--primary
    n7-btn--primary">
    Button label

</button>
{# {% extends '@base-button' %}

{%- block class -%}
    {{ super() }} 
{%- endblock class -%} #}
<{% if href %}a href="{{ href }}"{% elseif span %}span{% else %}button type="{{ type }}"{% endif %}
    class="n7-btn 
    {% block classes -%}n7-btn--primary
    {% if classes %}{{ classes }}{% endif %}
    {%- endblock classes -%}
"{% if ariaExpanded %} aria-expanded="false"{% endif %}
{% if ariaControls %} aria-controls="{{ ariaControls }}"{% endif %}
{% if id %} id="{{ id }}"{% endif %}
>
    {%- block before -%}{%- endblock before %}
    {%- block content -%}
        {% if labelHidden %}<span class="sr-only">{% endif %}
        {{ label }}
        {% if labelHidden %}</span>{% endif %}
        {% if srOnlyLabel %}<span class="sr-only">{{ srOnlyLabel }}</span>{% endif %}
    {%- endblock content %}

    {%- block after -%}{%- endblock after %}
</{% if href %}a{% elseif span %}span{% else %}button{% endif %}>
{
  "label": "Button label",
  "type": "button",
  "classes": "n7-btn--primary"
}

Button variants.

Variants extend button.njk template. Variant classes are specified in variant template. Button configurations:

  • classes: value - when you need extra classes on button - for style overriding etc
  • ariaExpanded: true - if you need to add ariaExpanded attribute
  • ariaControls: controlledIdValue - if you need aria controls - value is id of the controlled item
  • id: value - if you need and id
  • label: value - button text
  • href: value - if button is used as link (print link tag instead of button)
  • span: true - if toy need a “fake” non interactive button (eg: full clickable card)
  • icon: value - id of button icon
  • labelHidden: true - used in button icon (print label in sr-only span)
  • srOnlyLabel: value - adds a screen-reader-only text when needed (eg: “View more” generic label button, you need “View more” - sr-only: “news”)