Net7 UI Kit

Button: Outline 

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

    Button label

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

{%- block classes -%}
    n7-btn--outline {{ 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",
  "iconSize": "w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6",
  "icon": "mini--chevron-right"
}
  • 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)