Intro
Button lar brukeren utføre en handling.
Egnet til å:
- Sende inn et skjema
- Åpne et modalvindu
- Beregne et resultat
Vurder noe annet:
- Navigasjon (bruk heller Link eller Link panel)
- Vise og skjule innhold (bruk heller Accordion)
Eksempler
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.
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.
Tips
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.
Tilgjengelighet
Tips
Sørg for at knappens synlig tekst kommer første i sitt tilgjengelig navn. Dette gjør det lettere for folk som bruker stemmestyring å aktivere knappen.
| Kommando | Interaksjon |
| Enter | Aktiver |
| Space | Aktiver |
Bruk
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).
Props
Button
- as? React.ElementType
- children? ReactNode
- variant?"primary" | "secondary" | "tertiary" | "danger"
- size?"medium" | "small" | "xsmall"
- disabled? boolean
- loading?boolean
- icon? ReactNode
- iconPosition?"left" | "right"
- className? string
- ref? Ref<HTMLButtonElement>
- OverridableComponent-api
- Button content
- Changes design and interaction-visuals
- Changes padding, height and font-size
- Prevent the user from interacting with the button: it cannot be pressed or focused.
@note Avoid using if possible for accessibility purposes
- Replaces button content with a Loader component, keeps width
- Button Icon
- Icon position in Button
- Button extends HTMLButtonElement