Button

Unable to parse html

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

render(<Preview />)

Bruk

Klassenavnet ds-button blir satt på <button>.

Det er tre data-attributtar du kan bruke for tilpasning:

• data-icon - legg på dersom knappen kun har ikon.
• data-variant - set variant på knappen (primary, secondary, tertiary).
• data-fullwidth - legg på dersom knappen skal vere full bredde.

CSS variablar og data-attributtar

Størrelsar styrast med data-size og fargar med data-color. Komponenten vil arve næraste forelder med desse satt.

Eksempel

Varianter

data-variant brukast for å endre utsjånad på knappen.

Unable to parse html

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

render(<Variants />)

Ikon

Dersom du kun har ikon i knappen kan du sette data-icon="true" for å få den firkanta. Har du anna innhald, som tekst, vil knappen automatisk få luft rundt ikonet.

Unable to parse html

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

render(<Icons />)

Knappar som lastar

Dersom du skal ha ein knapp som lastar må du sjølv legge til laste-indikator og aria-busy="true".

Merk: aria-busy hindrar ikkje at knappen utløyser interaksjonar. Den påverkar berre utsjånad og tilgjengelegheit, ikkje funksjonaliteten. Dersom knappen ikkje skal kunne utføre handlingar, må du sjølv legge inn logikk som hindrar at callback-funksjonen blir køyrd.

Knappar som er deaktivert

Så godt det lar seg gjerde burde ein unngå deaktiverte knappar. Dersom du har ein <button>, kan du deaktivere med attributten disabled. Dersom du har ein <a>, kan du deaktivere med attributten aria-disabled="true". Merk: aria-disabled hindrar ikkje at knappen utløyser interaksjonar. Den påverkar berre utsjånad og tilgjengelegheit, ikkje funksjonaliteten. Dersom knappen ikkje skal kunne utføre handlingar, må du sjølv legge inn logikk som hindrar at callback-funksjonen blir køyrd.

React

I React legg me også på type="button" som standard, for å unngå uventa submit i skjema.

Ekstra logikk for knappar som lastar

I React brukar me loading={true} for å vise at knappen lastar noko. Her kan du også sende inn din eigen loading-komponent dersom vår Spinner ikkje passar.

Unable to parse html

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

render(<Loading />)

I eksempelet over blir aria-busy="true" sett automatisk når loading={true}. Dette er den anbefalte måten å vise at ein knapp lastar på.

Knapp som lenkje

Lenker kan få utsjånad som ein knapp, men vurder først om det er betre å bruke Link-komponenten. For å endre knappen til ei lenkje brukast asChild. Les meir om komposisjon i Designsystemet.

Unable to parse html

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

render(<AsLink />)