Intro
Button lar brukeren utføre en handling.
Egnet til:
- Innsending av skjema
- Beregning av resultater
- Trigger for åpning av modal
Uegnet til:
- Trigger for vis/skjul av innhold (bruk heller Accordion)
- Navigasjon (bruk heller Link eller Link panel)
Eksempler
Varianten xsmall er tilgjengelig for bruk i tabell eller interne løsninger. Bør brukes sparsomt om mulig da klikkflaten kan være problematisk, spesielt på mobil.
OverridableComponent lar deg endre hvilken html-tag komponenten rendres med.
Varianter
Primary
Denne knappen skal brukes der løsningen/siden har en tydelig hoved-/primær-funksjon (f.eks. "Lagre" eller "Send søknad"). Merk at det som regel bare skal finnes èn hovedknapp på en og samme side. Et mulig unntak fra denne regelen kan være inne i en modal-rute som legger seg oppå det øvrige innholdet hvor det er tillatt med en ekstra hoved- eller danger-knapp ved behov. Alle knapper arver farge fra Primary med unntak av danger knappen.
Secondary
Dette er hvordan en sekundær knapp skal se ut. De fleste knappene i løsningene våre skal se slik ut. Hvis du er i tvil om hvilken knapp du skal bruke, er det sikkert denne som er riktig.
Tertiary
Denne knappen kan brukes som et alternativ til sekundær knapp ved behov.
Neutral
Nøytral knapp får du i variantene primary, secondary og tertiary. Disse knappene kan du bruke til handlinger som ikke trenger så mye oppmerksomhet.
Danger
Denne knappen skal brukes på samme måte som Primary-button, men bare der hoved-/primær-funksjonen kan føre til tap av viktig lagret informasjon (f.eks. "Slett") Dette er en destruktiv handling som kan få svært negative konsekvenser hvis handlingen ikke var ønsket, for eksempel som en bekreftelse på at brukeren ikke lenger ønsker å motta ytelser.
Loader
Loaderen kommuniserer til bruker at systemet tenker. Annet knappeinnhold som tekst eller ikon forsvinner når loaderen vises. Om ventetiden går over noen få sekunder bør en ekstra tekst forklare situasjonen til bruker.
Størrelser
Knappene har dynamisk bredde (autolayout) men fast høyde, det som skiller medium og small er høyden og tekststørrelsen. Small er laget spesielt for interne flater og de kompakte forholdene som eksisterer der, for eksempel saksbehandlingssystemene.
Disabled
Disabled state setter hele button-komponenten opacity til 30%. Ved å senke opacity på hele komponenten beholdes det originale uttrykket samtidig som det skaper en deaktivert effekt. 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 finner at du 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 er alltid 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).
Antall handlinger
En knapp kan ha en handling som skrives kort og godt. Om du har kombinerte handlinger og lang tekst på knappen bør du dele det opp i flere knapper/handlinger.
Varianter i gruppe
En gruppe med knapper må bruke samme variant.
Tilgjengelighet
Sørg for at knappens synlige tekst kommer først i dens tilgjengelige navn. Dette gjør det lettere for folk som bruker stemmestyring å aktivere knappen.
Tastaturinteraksjon
| Kommando | Interaksjon |
|---|---|
| Enter | Aktiver |
| Space | Aktiver |
Props
Button
- as? React.ElementType
- OverridableComponent-api
- children? ReactNode
- Button content
- variant?"primary" | "primary-neutral" | "secondary" | "secondary-neutral" | "tertiary" | "tertiary-neutral" | "danger"
- Changes design and interaction-visuals
- size?"medium" | "small" | "xsmall"
- Changes padding, height and font-size
- disabled? boolean
- Prevent the user from interacting with the button: it cannot be pressed or focused. @note Avoid using if possible for accessibility purposes
- loading?boolean
- Replaces button content with a Loader component, keeps width
- icon? ReactNode
- Button Icon
- iconPosition?"left" | "right"
- Icon position in Button
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Button extends HTMLButtonElement
Tokens
| Token | Fallback |
|---|---|
| --ac-button-border-radius | --a-border-radius-medium |
| --ac-button-padding | --a-spacing-3 --a-spacing-5 |
| --ac-button-padding-small | --a-spacing-1 --a-spacing-3 |
| --ac-button-padding-xsmall | --a-spacing-05 --a-spacing-2 |
| --ac-button-padding-icon-only | --a-spacing-3 |
| --ac-button-padding-icon-only-small | --a-spacing-1 |
| --ac-button-padding-icon-only-xsmall | --a-spacing-05 |
| --ac-button-primary-bg | --a-surface-action |
| --ac-button-primary-text | --a-text-on-action |
| --ac-button-primary-hover-bg | --a-surface-action-hover |
| --ac-button-primary-active-bg | --a-surface-action-active |
| --ac-button-primary-focus-border | --a-surface-default |
| --ac-button-secondary-text | --a-text-action |
| --ac-button-secondary-bg | --a-surface-transparent |
| --ac-button-secondary-border | --a-border-action |
| --ac-button-secondary-hover-text | --a-text-action-on-action-subtle |
| --ac-button-secondary-hover-bg | --a-surface-action-subtle-hover |
| --ac-button-secondary-focus-border | --a-border-action |
| --ac-button-secondary-active-text | --a-text-on-action |
| --ac-button-secondary-active-bg | --a-surface-action-active |
| --ac-button-secondary-active-focus-border | --a-surface-default |
| --ac-button-tertiary-text | --a-text-action |
| --ac-button-tertiary-bg | --a-surface-transparent |
| --ac-button-tertiary-hover-text | --a-text-action-on-action-subtle |
| --ac-button-tertiary-hover-bg | --a-surface-action-subtle-hover |
| --ac-button-tertiary-focus-border | --a-border-action |
| --ac-button-tertiary-active-text | --a-text-on-action |
| --ac-button-tertiary-active-bg | --a-surface-action-active |
| --ac-button-tertiary-active-hover-bg | --a-surface-action-active |
| --ac-button-danger-bg | --a-surface-danger |
| --ac-button-danger-text | --a-text-on-danger |
| --ac-button-danger-hover-bg | --a-surface-danger-hover |
| --ac-button-danger-active-bg | --a-surface-danger-active |
| --ac-button-loader-stroke | currentColor |
| --ac-button-primary-loader-stroke-bg | rgb(255 255 255 / 0.3) |
| --ac-button-primary-neutral-bg | --a-surface-neutral |
| --ac-button-primary-neutral-text | --a-text-on-neutral |
| --ac-button-primary-neutral-hover-bg | --a-surface-neutral-hover |
| --ac-button-primary-neutral-active-bg | --a-surface-neutral-active |
| --ac-button-primary-neutral-focus-border | --a-surface-default |
| --ac-button-secondary-neutral-text | --a-text-default |
| --ac-button-secondary-neutral-bg | --a-surface-transparent |
| --ac-button-secondary-neutral-border | --a-border-strong |
| --ac-button-secondary-neutral-hover-bg | --a-surface-neutral-subtle-hover |
| --ac-button-secondary-neutral-focus-border | --a-border-stron |
| --ac-button-secondary-neutral-active-text | --a-text-on-neutral |
| --ac-button-secondary-neutral-active-bg | --a-surface-neutral-active |
| --ac-button-secondary-neutral-active-focus-border | --a-surface-default |
| --ac-button-tertiary-neutral-text | --a-text-default |
| --ac-button-tertiary-neutral-hover-text | --a-text-default |
| --ac-button-tertiary-neutral-hover-bg | --a-surface-neutral-subtle-hover |
| --ac-button-tertiary-neutral-focus-border | --a-border-stron |
| --ac-button-tertiary-neutral-active-text | --a-text-on-neutral |
| --ac-button-tertiary-neutral-active-bg | --a-surface-neutral-active |
| --ac-button-tertiary-neutral-active-hover-bg | --a-surface-neutral-active |