Button

Eksempler

Varianter

Velg blant primary, secondary, ghost, outline, danger og dimmed.

<Stack gap="lg" flexDirection="column">
  <Button variant="primary">
    Primær knapp
  </Button>
  <Button variant="secondary">
    Sekundær knapp
  </Button>
  <Button variant="ghost">
    Ghost knapp
  </Button>
  <Button variant="outline">
    Outline knapp
  </Button>
  <Button variant="danger">
    Danger knapp
  </Button>
  <Button variant="dimmed">
    Dimmed knapp
  </Button>
</Stack>

Størrelser

Velg blant small, medium og large.

<Stack gap="lg">
  <Button size="small" variant="primary">
    Knapp
  </Button>
  <Button size="medium" variant="primary">
    Knapp
  </Button>
  <Button size="large" variant="primary">
    Knapp
  </Button>
</Stack>

Disabled

Du bør unngå å bruke disabled. Det kan du lese mer om HER.

Vi bruker en gråtone på bakgrunn og forgrunn på alle våre disabled-knapper. Dette var for å sikre lesbarhet, samtidig for å gi et signal på at de ikke er interaktive. Denne tilnærmingen ble foretrukket framfor bruk av opasitet, fordi opasitet reduserer vår kontroll over kontrasten, og kan gjøre det vanskelig for fargeblinde å skille mellom interaktive- og ikke-interaktive knapper.

function DisabledButton() {
  const [isDisabled, setIsDisabled] = React.useState(true);
  function handleSubmit (e) {
    if (isDisabled) {
      e.preventDefault();
      return;
    }

    console.log("Sendt");
  };

  return (
    <Button
      aria-disabled={isDisabled}
      onClick={handleSubmit}
      variant="primary"
    >
      Send inn
    </Button>
  );
}

Med spinner

Ved isLoading skjules teksten visuelt, og det vises en spinner.

function LoadingButton() {
  const [isLoading, setIsLoading] = React.useState(false);
  
  function handleSubmit(e) {
    e.preventDefault();

    if (isLoading) {
      return;
    }
    setIsLoading(true);
    
    // Simulerer lastetid
    setTimeout(() => {
      console.log("Sendt");
      setIsLoading(false);
    }, 2000);
  }

  return (
    <Button
      aria-label={isLoading ? "Laster" : ""}
      isLoading={isLoading}
      onClick={handleSubmit}
      variant="primary"
    >
      Send inn
    </Button>
  );
}

Med ikon

Eksempel med venstre- eller høyre-stilt ikon.

<Stack gap="lg" flexDirection="row">
  <Button size="medium" variant="primary" style={{display: "flex", gap: "0.5rem"}}>
    <EnergyIcon fontSize="1.5rem" /> Knapp
  </Button>
  <Button size="medium" style={{display: "flex", gap: "0.5rem"}} variant="primary">
    Knapp <EnergyIcon fontSize="1.5rem" />
  </Button>
</Stack>

Eksempel

LinkButton

Vis lenke som en knapp.

<Button asChild variant="primary">
  <a href="#">Lenke</a>
</Button>

Retningslinjer

Bruk av varianter

Primary

Primary-knapper brukes for å fremheve den viktigste handlingen på en side eller i et skjema. Denne typen knapp fanger brukerens oppmerksomhet og brukes for viktige handlinger som 'Send inn', 'Lagre', eller 'Fortsett'.

Secondary

Secondary-knapper brukes for sekundære handlinger som supplerer hovedhandlingen. De er mindre fremtredende og brukes for handlinger som 'Avbryt', 'Tilbake' eller i tilfeller der du har mer enn én viktig handling, men ønsker å bevare hierarkiet av handlingene.

Ghost

Ghost-knapper har en enkel, minimalistisk stil og brukes ofte når du ønsker å tilby en handling uten å trekke for mye oppmerksomhet. De passer godt i mindre påtrengende kontekster eller når du ønsker å plassere en mindre viktig handling i et allerede travelt brukergrensesnitt.

Outline

Outline-knapper, som er definert av en kantlinje og vanligvis gjennomsiktig innhold, brukes ofte for mindre viktige eller sekundære handlinger. De er nyttige i brukergrensesnitt der du ønsker å tilby alternativer uten å overvelde brukeren med for sterke fargevalg. Outline-knapper er ofte brukt i skjemaer og dialogbokser for handlinger som 'Slett' eller 'Lær mer'.

Dimmed

Dimmed-knapper, som er definert av den grå fargen, brukes ofte for mindre viktige eller sekundære handlinger. De er nyttige i brukergrensesnitt der du ønsker å tilby alternativer uten å overvelde brukeren med for sterke fargevalg. Outline-knapper er ofte brukt i skjemaer og dialogbokser for handlinger som tilbyr alternative handlinger som ikke er direkte knyttet til siden. E.g. 'Last ned'.

Bruk av størrelser

Small

Denne størrelsen passer best for handlinger som krever mindre visuell oppmerksomhet eller for bruk i trange rom, som verktøylinjer, eller små formseksjoner.

Medium

Standardstørrelsen og passer i de fleste grensesnitt, fra skjemaer til dialogbokser, og gir en god balanse mellom synlighet og plassbesparelse.

Large

Store knapper er spesielt nyttige i inngangspunktene til applikasjoner, store kall-til-handling-seksjoner, eller når du vil legge vekt på en hovedhandling, men bør brukes med omhu for å unngå å overvelde brukeren.

Bruk av ikoner

Størrelse

<Stack gap="lg" flexDirection="row">
  <Button size="small" variant="primary" style={{display: "flex", gap: "0.5rem"}}>
    Knapp <EnergyIcon fontSize="1rem" />
  </Button>
  <Button size="medium" style={{display: "flex", gap: "0.5rem"}} variant="primary">
    Knapp <EnergyIcon fontSize="1.5rem" />
  </Button>
  <Button size="large" style={{display: "flex", gap: "0.5rem"}} variant="primary">
    Knapp <EnergyIcon fontSize="1.5rem" />
  </Button>
</Stack>

Små knapper bruker ikoner på 16px, mens medium og store knapper bruker ikoner på 24px.

aria

Knapper med tekst og ikoner bør skjule ikonet med aria-hidden, så ikonet ikke blir tilgjengelig for skjermlesere. Årsaken er at knappens tekst bør være nok for å forklare hva knappen skal utføre.

<Button size="medium" variant="primary" style={{display: "flex", gap: "0.5rem"}}>
  <EnergyIcon aria-hidden="true" fontSize="1.5rem" />Innstillinger
</Button>

Knapper uten tekst, kun med ikon, bør bruke aria-label på knappen for å forklare knappens intensjon.

<Button variant="primary" aria-label="innstillinger">
  <EnergyIcon fontSize="1.5rem" />
</Button>

Kode

import { Button } from "@aneo-org/design-react/clientComponents";