Button

const Preview = () => {
  return <Button>Min knapp</Button>;
};

render(<Preview />)

Bruk Button når

• ei konkret handling skal utførast, for eksempel å lagre eller sende inn eit skjema
• tilstanden i løysinga vert påverka, for eksempel når ein dialog skal opnast eller ein prosess skal startast

Unngå Button når

• det skal navigerast til andre sider eller ut av tenesta, bruk heller Link
• det skal filtrerast informasjon, bruk heller Chip
• vise kva for filter som er valde, bruk heller Chip

Eksempel

Framhevingsnivå

Vi har ulike knappetypar for å framheve bestemte handlingar. Variantane primary, secondary og tertiary viser kor viktig handlinga er, og hjelper brukaren å forstå kva som bør prioriterast.

const Variants = () => {
  return (
    <>
      <Button variant='primary'>Primary</Button>
      <Button variant='secondary'>Secondary</Button>
      <Button variant='tertiary'>Tertiary</Button>
    </>
  );
};

render(<Variants />)

Primary Vi brukar denne knappen til den viktigaste handlinga for brukaren, for eksempel "Lagre", "Neste" eller "Send inn". Det skal som oftast berre vere éin primærknapp per side.

Secondary Vi brukar denne knappen til handlingar som ikkje er hovudhandlingar. Den står ofte saman med ein primærknapp. Dersom primærknappen er "Lagre", kan sekundærknappen vere "Avbryt".

Tertiary Denne knappen er endå meir diskré enn sekundærknappen. Den blir ofte brukt saman med ein primær- eller sekundærknapp, til mindre viktige handlingar. Dersom vi vil bruke han åleine, må han ha eit ikon - elles kan det vere vanskeleg å sjå at det er ein knapp.

Fargar

Knappen kjem i alle fargane som er i temaet ditt.

const ColorVariants = () => {
  const colorVariants = [
    'accent',
    'brand1',
    'brand2',
    'brand3',
    'neutral',
    'danger',
  ];

  return (
    <>
      {colorVariants.map((color) => (
        <Button
          key={color}
          data-color={color as ButtonProps['data-color']}
          variant='primary'
        >
          {color}
        </Button>
      ))}
    </>
  );
};

render(<ColorVariants />)

Ei gruppe med knappar bør bruke same fargevariant. Unntaket er når vi vil tydeleggjere ei handling brukaren ikkje kan angre, for eksempel «Slett». Elles skal vi som regel ikkje kombinere ulike fargevariantar.

const CombinedColors = () => (
  <>
    <Button variant='primary' data-color='neutral'>
      Publiser
    </Button>
    <Button variant='secondary' data-color='neutral'>
      Lagre kladd
    </Button>
    <Button variant='tertiary' data-color='danger'>
      Slett
    </Button>
  </>
);

render(<CombinedColors />)

Ikon

Button kan ha ikon plassert anten til venstre eller til høgre for teksten. Som hovudregel rår vi til å plassere ikonet til venstre. Ikon i knappar får automatisk luft til teksten.

const Icons = () => (
  <>
    <Button icon aria-label='Kun ikon'>
      <PencilWritingIcon aria-hidden />
    </Button>
    <Button>
      <PencilWritingIcon aria-hidden />
      Rediger
    </Button>
  </>
);

render(<Icons />)

Knapp med berre ikon

Knappar med berre ikon brukar vi kun for godt kjende ikon som "Lukk" og "Slett". Når knappen ikkje har tekst, må vi leggje til ein tilgjengeleg tekst som forklarer kva knappen gjer. Dette kan leggjast i title, aria-label, eller i ein Tooltip.

Knapp med tekst og ikon

Når vi bruker ikon saman med tekst, bør ikonet ha aria-hidden, slik at det ikkje blir lesen unødvendig tekst for skjermlesarar.

Vi plasserer ikonet til venstre eller høgre for teksten, avhengig av kva knappen kommuniserer og kvar han er plassert i grensesnittet.

Som oftast er venstre den beste plasseringa, men det finst unntak:

• Dersom knappen for eksempel seier «Start» og har ei pil som peikar mot høgre, er det naturleg at pila står til høgre for teksten.
• Dersom knappen er fast plassert på høgre side av grensesnittet, er det best at ikonet òg er plassert til høgre for teksten.

Vi skal halde oss til eitt ikon per knapp.

Knapp som lenkje

Lenker kan få utsjånad som ein knapp, men vurder først om det er betre å bruke Link-komponenten.

const AsLink = () => (
  <Button asChild>
    <a target='_blank' rel='noreferrer' href='https://www.designsystemet.no'>
      Gå til designsystemet.no
    </a>
  </Button>
);

render(<AsLink />)

Knappar som lastar

Når vi skal vise brukaren at knappen held på å laste noko, kan vi kombinere knappen med ein spinner.

const Loading = () => (
  <>
    <Button variant='primary' loading>
      Laster…
    </Button>
    <Button variant='secondary' loading>
      Laster…
    </Button>
    <Button variant='tertiary' loading>
      Laster…
    </Button>
  </>
);

render(<Loading />)

Retningslinjer

Knappar har ein viktig funksjon og er direkte knytte til ei handling. Dei gjev brukaren moglegheit til å utføre oppgåver.

Plassering av knappar

Når vi legg fleire knappar ved sida av kvarandre, skal primærknappen stå først.
Unntaket er «Forrige» og «Neste» - då skal den sekundære knappen «Forrige» stå først.

Éi handling per knapp

Vi skal tydeleg beskrive kva handling knappen utfører. Ein knapp skal berre ha éi handling - ikkje fleire.

Éi hovudhandling per side

Vi skal halde oss til éin primærknapp per side. Dersom det er fleire hovudhandlingar, kan brukarane bli usikre på kva dei skal gjere.

Tekst

Alle knappar på same side bør ha unike knappetekstar.

Knappeteksten bør vere kort, helst ikkje meir enn tre ord. Tenk på at knappen tydeleg skal beskrive kva som skjer når brukaren klikkar på han.

Vel verb i oppfordringsform (imperativ) på knappar for å vise brukarane at dei kan utføre ei handling. Eksempel på oppfordringsform er «send», «signer», «endre».

Unngå å blande skrivemåtar. Bruk stor forbokstav i det første ordet, som du ville gjort i ei vanleg setning. Ikkje bruk berre store bokstavar (all caps), for det er vanskelegare å lese.