Knapp

Alle knapper side om side

Alle knappene våre er alignet på samme bunnlinje.

   
<Knapp>Normal</Knapp>
<Hovedknapp>Hoved</Hovedknapp>
<Fareknapp>Fare</Fareknapp>
<Flatknapp>Flat</Flatknapp>

Kopiert!

Normal

Dette er hvordan en normal knapp skal se ut. De fleste knappene i løsningene våre skal se slik ut. Hvis du er i tvil om hvilken knapp du skal bruke, er det sikkert denne som er riktig.

<Knapp>Normal</Knapp>

Kopiert!

Hovedknapp

Denne knappen skal brukes der løsningen/siden har en tydelig hoved-/primær-funksjon (f.eks. "Lagre" eller "Send søknad"). Merk at det som regel bare skal finnes èn eneste hovedknapp på en og samme side. Et mulig unntak til denne regelen kan være inne i en modal-rute som legger seg oppå det øvrige innholdet hvor det er tillatt med en ekstra hoved- eller fare-knapp ved behov.

<Hovedknapp>Hovedknapp</Hovedknapp>

Kopiert!

Fareknapp

Denne knappen skal brukes på samme måte som hovedknapp, men bare der hoved-/primær-funksjonen kan føre til tap av viktig lagret informasjon (f.eks. "Slett") eller ellers bety svært negative konsekvenser hvis handlingen ikke var ønsket (f.eks. som en bekreftelse på at brukeren ikke lenger ønsker å motta ytelser).

<Fareknapp>Fareknapp</Fareknapp>

Kopiert!

Flatknapp

Denne knappen kan brukes som et alternativ til normal knapp ved behov.

<Flatknapp>Flatknapp</Flatknapp>

Kopiert!

Med spinner

Alle knappene våre har støtte for å vise en spinner.









<Knapp spinner>Normal</Knapp>
<Hovedknapp spinner>Hoved</Hovedknapp>
<Fareknapp spinner>Fare</Fareknapp>
<Flatknapp spinner>Flat</Flatknapp>
<Knapp disabled spinner>Disabled</Knapp>

Kopiert!

Disabled

Alle knappene har støtte for disabled stil.

advarsel
Merk at disabled knapper bør unngås, og at man heller bør bruke vanlige knapper kombinert med tydelige feilmeldinger hvis handlingen av en eller annen grunn ikke er tillatt. Ler mer om dette på siden vår om `disabled`.






<Knapp disabled>Normal</Knapp>
<Hovedknapp disabled>Hoved</Hovedknapp>
<Fareknapp disabled>Fare</Fareknapp>
<Flatknapp disabled>Flat</Flatknapp>

Kopiert!

Som lenke

Du kan også velge å implementere knappene våre som lenker. I så fall trenger du bare å installere nav-frontend-knapper-style-pakken, og deretter legge til CSS-klassene på lenkene selv.

info
Vær obs på at det ikke finnes noe disabled-attributt for lenker. For å "disable" en lenke må du i stedet fjerne href-attributtet.
<a href="#som-lenke" className="knapp">Normal</a>
<a href="#som-lenke" className="knapp knapp--hoved">Hoved</a>
<a href="#som-lenke" className="knapp knapp--fare">Fare</a>
<a href="#som-lenke" className="knapp knapp--flat">Flat</a>
<a className="knapp knapp--disabled">Disabled</a>

Kopiert!

Mini

Alle knappene kan rendres i en mindre 32px versjon.

advarsel
Som hovedregel skal vi alltid bruke de store knappene våre. For tilfeller med svært begrenset plass kan de mindre knappene brukes unntaksvis ved klart behov.








<Knapp mini>Normal</Knapp>
<Hovedknapp mini>Hoved</Hovedknapp>
<Fareknapp mini>Fare</Fareknapp>
<Flatknapp mini>Flat</Flatknapp>
<Knapp disabled mini>Disabled</Knapp>

Kopiert!

Med ikon

info
Når du bruker ikoner er det viktig at du pakker inn teksten med <span>-elementer for å påse riktig avstand til ikonet.








const Cog = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 10h-2.854c-.2-.79-.454-1.667-.778-2.332L21.9 5.636a.498.498 0 0 0 0-.708l-2.83-2.826a.499.499 0 0 0-.707 0l-2.032 2.031c-.665-.324-1.542-.578-2.331-.777V.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v2.856c-.789.199-1.666.453-2.331.777L5.637 2.102a.499.499 0 0 0-.707 0L2.101 4.929a.5.5 0 0 0 0 .707l2.033 2.033c-.323.662-.578 1.54-.779 2.331H.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h2.855c.2.791.455 1.668.778 2.331L2.1 18.364a.5.5 0 0 0 0 .708L4.93 21.9c.188.188.52.188.707 0l2.032-2.032c.663.322 1.54.577 2.331.778V23.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-2.854c.791-.201 1.668-.456 2.331-.778l2.034 2.032a.5.5 0 0 0 .707 0l2.827-2.828a.499.499 0 0 0 0-.707l-2.032-2.033c.323-.663.578-1.54.778-2.331H23.5a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.501zM12 16c-2.205 0-4-1.795-4-4s1.795-4 4-4c2.206 0 4 1.795 4 4s-1.794 4-4 4z"/></svg>);

<Knapp><Cog /><span>Normal</span></Knapp>
<Hovedknapp><Cog /><span>Hoved</span></Hovedknapp>
<Fareknapp><Cog /><span>Fare</span></Fareknapp>
<Flatknapp><Cog /><span>Flat</span></Flatknapp>
<Knapp disabled><Cog /><span>Disabled</span></Knapp>

Kopiert!

Plassering av ikon





const Cog = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 10h-2.854c-.2-.79-.454-1.667-.778-2.332L21.9 5.636a.498.498 0 0 0 0-.708l-2.83-2.826a.499.499 0 0 0-.707 0l-2.032 2.031c-.665-.324-1.542-.578-2.331-.777V.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v2.856c-.789.199-1.666.453-2.331.777L5.637 2.102a.499.499 0 0 0-.707 0L2.101 4.929a.5.5 0 0 0 0 .707l2.033 2.033c-.323.662-.578 1.54-.779 2.331H.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h2.855c.2.791.455 1.668.778 2.331L2.1 18.364a.5.5 0 0 0 0 .708L4.93 21.9c.188.188.52.188.707 0l2.032-2.032c.663.322 1.54.577 2.331.778V23.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-2.854c.791-.201 1.668-.456 2.331-.778l2.034 2.032a.5.5 0 0 0 .707 0l2.827-2.828a.499.499 0 0 0 0-.707l-2.032-2.033c.323-.663.578-1.54.778-2.331H23.5a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.501zM12 16c-2.205 0-4-1.795-4-4s1.795-4 4-4c2.206 0 4 1.795 4 4s-1.794 4-4 4z"/></svg>);

<Knapp>
    <Cog />
    <span>Knapp</span>
</Knapp>

<Knapp>
    <span>Knapp</span>
    <Cog />
</Knapp>

<Knapp>
    <Cog />
    <span>Knapp</span>
    <Cog />
</Knapp>

Kopiert!

Kompakt

Bruk kompakt for å redusere høyre-/venstre-padding på knappene.

advarsel
Husk at knapper med bare ikoner også må få en tekst-verdi av hensyn til skjermlesere. Utility-klassen sr-only som gis av mixins-fila i Core-pakken kan brukes for å skjule teksten visuelt.


const Cog = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 10h-2.854c-.2-.79-.454-1.667-.778-2.332L21.9 5.636a.498.498 0 0 0 0-.708l-2.83-2.826a.499.499 0 0 0-.707 0l-2.032 2.031c-.665-.324-1.542-.578-2.331-.777V.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v2.856c-.789.199-1.666.453-2.331.777L5.637 2.102a.499.499 0 0 0-.707 0L2.101 4.929a.5.5 0 0 0 0 .707l2.033 2.033c-.323.662-.578 1.54-.779 2.331H.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h2.855c.2.791.455 1.668.778 2.331L2.1 18.364a.5.5 0 0 0 0 .708L4.93 21.9c.188.188.52.188.707 0l2.032-2.032c.663.322 1.54.577 2.331.778V23.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-2.854c.791-.201 1.668-.456 2.331-.778l2.034 2.032a.5.5 0 0 0 .707 0l2.827-2.828a.499.499 0 0 0 0-.707l-2.032-2.033c.323-.663.578-1.54.778-2.331H23.5a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.501zM12 16c-2.205 0-4-1.795-4-4s1.795-4 4-4c2.206 0 4 1.795 4 4s-1.794 4-4 4z"/></svg>);

<Knapp kompakt>
    <Cog />
    <span>Knapp</span>
</Knapp>

<Knapp kompakt>
    <Cog />
    <span className="sr-only">Knapp</span>
</Knapp>

Kopiert!

Ferdigkomponerte ikonknapper

Se Ikonknapper for flere ferdige knapper med tilhørende ikon.