Designsystem - Knapper

Knapper skal brukes i skjemaer og grensesnitt der brukeren kan utføre en handling, og for å utheve bestemte lenker i grensesnittet.

Button-group

Dersom flere knapper brukes sammen, bør de grupperes sammen med css-klassen button-group. Dette sørger for at avstanden mellom knappene blir lik

Knapper med tekst

Knapper kommer i fire ulike varianter: normal med blå bakgrunn, "spøkelsesknapper" som ser ut som vanlige lenker, samt grønne og røde knapper for å indikere suksess/advarsel for brukeren. Markupen kan brukes både for <button>- og <a>-elementer.

Alle knapper har i tillegg fire størrelser som kan brukes:

Små knapper - bruk modifikatorklassen button--small
Vanlige knapper (ingen ekstra klasser)
Store knapper - bruk modifikatorklassen button--large
Ekstra store knapper - bruk modifikatorklassen button--xlarge

Mørk bakgrunn

Dersom knapper skal brukes med blå bakgrunn, kan man legge klassen button-group--dark rundt knappene. Man kan også legge på klassen button-dark på knappen

<div class="button-group button-group--padding">
  <button class="button button--primary">
    <span class="button__text">Primær</span>
  </button>
  <button class="button button--primary">
    <span class="button__text">Primær</span>
  </button>
  <button class="button button--primary" disabled>
    <span class="button__text">Primær</span>
  </button>
  <button class="button button--secondary">
    <span class="button__text">Sekundær</span>
  </button>
  <button class="button button--secondary" disabled>
    <span class="button__text">Sekundær</span>
  </button>
  <button class="button button--tertiary">
    <span class="button__text">Tertiær</span>
  </button>
  <button class="button button--tertiary" disabled>
    <span class="button__text">Tertiær</span>
  </button>
  <button class="button button--primary button--loading">
    <span class="button__text">Primær</span>
  </button>
  <button class="button button--secondary button--loading">
    <span class="button__text">Sekundær</span>
  </button>
  <button class="button button--primary button--submit-form">
    <span class="button__text padding-x--large">Submit</span>
  </button>
</div>
<div class="button-group button-group--dark button-group--padding">
  <button class="button button--primary">
    <span class="button__text">Primær</span>
  </button>
  <button class="button button--primary" disabled>
    <span class="button__text">Primær</span>
  </button>
  <button class="button button--secondary">
    <span class="button__text">Sekundær</span>
  </button>
  <button class="button button--secondary" disabled>
    <span class="button__text">Sekundær</span>
  </button>
  <button class="button button--tertiary">
    <span class="button__text">Tertiær</span>
  </button>
  <button class="button button--tertiary" disabled>
    <span class="button__text">Tertiær</span>
  </button>
</div>

Knapper med tekst og ikon

Ikoner kan plasseres foran og bak tekst ved å bruke <span class="button__icon">-elementet inne i knappen. Knappene er laget slik at du kan legge til så mange ikoner du ønsker, men i utgangspunktet skal det kun brukes ett enkelt ikon - enten foran eller etter avhengig av konteksten brukeren er i. F.eks vil en tilbake-knapp kanskje ha en venstrepil foran teksten, mens en videre-knapp vil ha høyrepil etter teksten.

<div class="button-group button-group--padding">
  <button class="button button--primary">
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--primary" disabled>
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--secondary">
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--secondary" disabled>
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--tertiary">
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--tertiary" disabled>
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
</div>
<div class="button-group button-group--dark button-group--padding">
  <button class="button button--primary">
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--primary" disabled>
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--secondary">
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--secondary" disabled>
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--tertiary">
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--tertiary" disabled>
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
</div>

Knapper i grid

Knappene er utformet slik at de kan brukes enkelt i gridsystemet i tilfeller der knapper skal dekke en gitt bredde.

<section class="grid">
  <button class="button button--normal button--xlarge span-third">
    <span class="button__text">Helse og mestring</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--normal button--xlarge span-third">
    <span class="button__text">Skole og oppvekst</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--normal button--xlarge span-third">
    <span class="button__text">Administrasjon</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
</section>

Animerte knapper

Du kan legge til en kort animasjon på knapper med ikoner. Ikoner som ligger foran teksten vil flytte seg mot venstre, og ikoner som ligger etter teksten vil flytte seg mot høyre.

<div class="button-group">
  <button class="button button--normal button--animated">
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
  <button class="button button--ghost button--animated">
    <span class="button__text">Klikk meg!</span>
    <span class="button__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.032 21.475">
        <path
          d="M15.559,136.181,6,126.624a1.18,1.18,0,0,1,0-1.669l1.115-1.115a1.18,1.18,0,0,1,1.667,0l7.61,7.574L24,123.838a1.18,1.18,0,0,1,1.667,0l1.115,1.115a1.18,1.18,0,0,1,0,1.669l-9.557,9.557A1.18,1.18,0,0,1,15.559,136.181Z"
          transform="translate(-123.494 27.131) rotate(-90)" fill="currentColor" />
      </svg>
    </span>
  </button>
</div>

Knapp med ekstern lenke

<button class="button button--primary button--external">
  <span class="button__text">Klikk meg!</span>
</button>
<button class="button button--secondary button--external">
  <span class="button__text">Klikk meg!</span>
</button>
<button class="button button--tertiary button--external">
  <span class="button__text">Klikk meg!</span>
</button>