Net7 UI Kit

Button 

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

    Button label

</button>
 
<{% if href %}a href="{{ href }}"{% elseif span %}span{% else %}button type="{% if buttonType %}{{ buttonType }}{% else %}button{% endif %}"{% 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 %}
{% if callback %} onclick="{{ callback }}"{% endif %}
>
    {%- block before -%}{%- endblock before %}
    {%- block content -%}
        {% if labelHidden %}<span class="sr-only">{% endif %}
        {% if srOnlyLabel %}<span>{% endif %}
        {{ label | safe }}
        {% if labelHidden %}</span>{% endif %}
        {% if srOnlyLabel %}<span class="sr-only">{{ srOnlyLabel }}</span></span>{% endif %}
    {%- endblock content %}

    {%- block after -%}{%- endblock after %}
</{% if href %}a{% elseif span %}span{% else %}button{% endif %}>
 
{
  "label": "Button label",
  "iconSize": "w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6"
}
  • Content: 
    /**
 * BUTTON
 *
*/
@layer components {
    .n7-btn {
        @apply py-2 px-4 rounded border inline-flex gap-2 items-center font-bold text-lg tracking-wide transition-all duration-200 ease-out;
    }

    .n7-btn--primary {
        @apply n7-button-primary text-white hover:text-white hover:n7-button-primary-hover focus:n7-button-primary-hover active:n7-button-primary-active;
    }

    .n7-btn--secondary {
        @apply n7-button-secondary text-white hover:text-white hover:n7-button-secondary-hover focus:n7-button-secondary-hover active:n7-button-secondary-active;
    }

    .n7-btn--only-text {
        @apply bg-transparent n7-button-only-text hover:n7-button-only-text-hover hover:bg-neutral-100 focus:n7-button-only-text-hover active:n7-button-only-text-active;
    }

    .n7-btn--outline {
        @apply bg-transparent n7-button-outline border border-current hover:n7-button-primary hover:text-white focus:n7-button-outline-hover focus:bg-neutral-100;
    }

    .n7-btn--inverted {
        @apply n7-button-inverted n7-button-inverted-text hover:n7-button-inverted-hover hover:n7-button-inverted-text-hover focus:n7-button-inverted-focus focus:n7-button-inverted-text-focus active:n7-button-inverted-active  active:n7-button-inverted-text-active;
    }

    .n7-btn--text-inverted {
        @apply n7-button-text-inverted n7-button-text-inverted-text hover:n7-button-text-inverted-hover hover:n7-button-text-inverted-text-hover focus:n7-button-text-inverted-focus focus:n7-button-text-inverted-text-focus active:n7-button-text-inverted-active active:n7-button-text-inverted-text-active;
    }

    /* ICON VARIANTS */

    .n7-btn--icon {
        @apply justify-center p-0 w-9 h-9;
    }

    .n7-btn--icon-right,
    .n7-btn--icon-left {
        @apply gap-1.5;
    }

    .n7-btn--icon-right {
        @apply pr-2;
    }

    .n7-btn--icon-left {
        @apply pl-2;
    }

    /* SIZES MANAGEMENT */

    .n7-btn--s {
        @apply text-sm py-1 px-3;
    }

    .n7-btn--s.n7-btn--icon {
        @apply w-6 h-6;
    }

    .n7-btn--s.n7-btn--icon-right {
        @apply pr-1.5 gap-1;
    }

    .n7-btn--s.n7-btn--icon-left {
        @apply pl-1.5 gap-1;
    }

    .n7-btn--l {
        @apply text-xl py-3 px-6;
    }

    .n7-btn--l.n7-btn--icon {
        @apply w-12 h-12;
    }

    .n7-btn--l.n7-btn--icon-right {
        @apply pr-4 gap-2;
    }

    .n7-btn--l.n7-btn--icon-left {
        @apply pl-4 gap-2;
    }

    .n7-btn--s.n7-btn--icon,
    .n7-btn--l.n7-btn--icon {
        @apply px-0;
    }

}
  • URL: /components/raw/button/button.css
  • Filesystem Path: components/02-atoms/button/button.css
  • Size: 2.5 KB

Button component configuration.

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

  • id: value - if you need and id
  • buttonType: value - if button type is needed
  • label: value - button text
  • href: value - if button is used as link (print link tag instead of button)
  • span: true - if a “fake” non interactive button is needed (eg: full clickable card)
  • 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
  • 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”)
  • callback: value - if you need to add a callback function to button - eg for modal dialogs Blocks:
  • classes: for class overridings in variant templates, if needed
  • before: for content before main label (icon)
  • content: main content
  • after: for content after main label (icon)