Button
Intro
Button lar brukeren utføre en handling.
Eksempler
OverridableComponent lar deg endre hvilken html-tag komponenten rendres med. For vanlige lenker kan dette være en '<a>'-tag, men for f.eks React Router eller Remix kan det være en '<Link>'-komponent.
Vi fraråder bruk av disabled state da elementet blir gjemt fra hjelpeteknologier og ofte vil være vanskelig å oppfatte visuelt.
Varianter
Fremhevingsnivåer
Primary
Denne knappen skal brukes til hovedhandlingen i en seksjon/kontekst, det vil si den handlingen som skal ha mest oppmerksomhet (f.eks. "Lagre" eller "Send søknad").
Secondary
Denne varianten kan brukes til handlinger som ikke er hovedhandlinger, ofte i tillegg til en primary-knapp.
Tertiary
Denne brukes til nedtonede handlinger. Om den brukes alene må den ha med et ikon, ellers er det vanskelig å se at det er en knapp.
Fargevarianter
Action (standard)
Disse knappene brukes til handlinger som skal ha oppmerksomhet og er en del av den planlagte flyten i løsningen.
Neutral
Disse knappene kan du bruke til handlinger som ikke trenger så mye oppmerksomhet.
Danger
Denne knappen skal brukes til destruktive handlinger som ikke kan omgjøres, for eksempel "Slett".
Loader
Loaderen kommuniserer at handlingen tar tid. Annet knappeinnhold som tekst eller ikon forsvinner når loaderen vises. Om ventetiden er mer enn få sekunder bør en ekstra tekst forklare situasjonen til brukeren.
Størrelser
Knappene har dynamisk bredde men fast høyde, det som skiller medium og small er høyden og tekststørrelsen. Small er laget spesielt for interne flater.
Størrelsen xsmall er tilgjengelig for bruk i tabeller eller interne løsninger. Den bør brukes sparsomt da klikkflaten kan være problematisk, spesielt på mobil.
Disabled
Generelt fraråder vi bruk av disabled state fordi det er en dårlig måte å kommunisere med brukerne på. Disabled state bør være siste utvei. Les mer om hvorfor deaktiverte tilstander er problematiske på Aksel.
Hvis du mot formodning må bruke en disablet knapp, sørg for at alle brukerne dine både opplever og forstår at knappen eksisterer, at den er deaktivert, og hvorfor. Bruk gjerne støttetekst som alltid er synlig når knappen er deaktivert.
Retningslinjer
Tekst på knapp
Gjeldende anbefaling for å gjøre en knapp godt lesbar er å bruke stor forbokstav og små bokstaver på resten av ordene (sentence case).
Ikonknapp
Knapper med kun ikon er forbeholdt løsninger for ekspertbrukere fordi handlingen ikke beskrives med tekst. Unntak kan gjøres for godt kjente ikoner, som lukk og slett. Husk at knappen må ha en tilgjengelig tekst, for eksempel Tooltip, title eller aria-label.
Tooltip forklarer handlingen og viser tastatursnarveier.
Antall handlinger
En knapp skal ha en kort og konsis beskrivelse av handlingen den utfører.
Varianter i gruppe
En gruppe med knapper må bruke samme fargevariant.
Tilgjengelighet
Hvis du overstyrer tilgjengelig navn, for eksempel med aria-label, må den synlige teksten kommer først i denne. Dette gjør det lettere for folk som bruker stemmestyring å aktivere knappen.
Hvis du bruker ikon i tillegg til tekst, skal ikonet ha aria-hidden så det ikke legges til i tilgjengelig navn.
Props
Button
as?
- Type:
React.ElementType - Description:
children?
- Type:
ReactNode - Description:
variant?
- Type:
"primary" | "primary-neutral" | "secondary" | "secondary-neutral" | "tertiary" | "tertiary-neutral" | "danger" - Default:primary
- Description:
size?
- Type:
"medium" | "small" | "xsmall" - Default:medium
- Description:
disabled?
- Type:
boolean - Description:
loading?
- Type:
boolean - Default:false
- Description:
icon?
- Type:
ReactNode - Description:
iconPosition?
- Type:
"left" | "right" - Default:left
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
