Button

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

render(<Preview />)

Bruk

Eksempel

Varianter

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

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

render(<Variants />)

Fargar

Enten sett du data-color direkte på Button, eller så arvar den frå næraste overordna element med data-color.

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

Ikon

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

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

render(<Icons />)

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 kom komposisjon i Designsystemet.

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

Under 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.

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.

Merk: Verken loading="true" 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.

HTML

Klassenavnet ds-button blir satt på <button>. I React legg me også på type="button" som standard, for å unngå uventa submit i skjema.

Det er tre data-attributtar du kan bruke for tilspasning: 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.

Dersom du skal ha ein knapp som laster, må du sjølv legge til laste-indikator.

CSS variablar og data-attributtar