OffHealth component library

Button: Outline Reverse 

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

    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
        <use xlink:href="../../icons.svg#mini--arrow-right" />
    </svg>

</button>
 
{% extends '@button' %}

{%- block classes -%}
    n7-btn--outline-reverse {{ classes }}
{%- endblock classes -%}

{%- block after -%}
    {% render '@icon--small', { id: icon, classes: 'ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1', size: 'w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6' }, true %}
{%- endblock after -%}
 
{
  "label": "Button label",
  "type": "button",
  "classes": "n7-btn--primary",
  "isReverse": true,
  "icon": "mini--arrow-right"
}

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”)