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

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 har kun 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 laster, må du sjølv legge til laste-indikator.

Merk: Verken aria-busy eller aria-disabled hindrar automatisk at knappen utløyser onClick. Du må sjølv sørgje for at callback-funksjonen ikkje køyrer når knappen er deaktivert.

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-disabled sett automatisk når loading={true}. Dette er den anbefalte måten å vise at ein knapp er deaktivert på. Då kan knappen framleis få fokus når brukaren navigerer med tastatur. Slik blir skjermlesarar og andre hjelpemiddel informerte om at knappen finst, men at han ikkje er aktiv.

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 />)