Button
Button brukes til å utløse handlinger. Knapper er det primære interaksjonselementet og skal alltid kommunisere hva som skjer når brukeren trykker på dem. Velg variant basert på handlingens prioritet — bruk én primary-knapp per kontekst og reserver ghost for lavprioriterte handlinger.
Viktig informasjon
Ikke bruk Button til navigasjon — bruk Link eller NavLink i stedet.
Props
Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
childrenReact | React.ReactNode | Ja | — | Tekstinnholdet i knappen. |
variantReact | "primary" | "secondary" | "ghost" | "tertiary" | Nei | "secondary" | Visuell prioritet. |
iconEgendefinert | React.ReactElement | Nei | — | Ikon som vises ved siden av teksten. Bruk <Icon>-komponenten. |
iconPositionEgendefinert | "left" | "right" | Nei | "left" | Plasseringen av ikonet relativt til teksten. |
loaderEgendefinert | { showLoader: boolean, textDescription: string } | Nei | — | Viser lasteindikator i knappen. |
disabledNative HTML | boolean | Nei | false | Deaktiverer knappen. |
typeNative HTML | "button" | "submit" | "reset" | Nei | "button" | HTML-type-attributtet. |
onClickReact | React.MouseEventHandler<HTMLButtonElement> | Nei | — | Klikk-handler. |
Utfasede props
Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
iconLeftEgendefinertUtfaset | React.ReactElement | Nei | — | Ikon som vises til venstre for teksten. |
iconRightEgendefinertUtfaset | React.ReactElement | Nei | — | Ikon som vises til høyre for teksten. |
Eksempler
Primær handling
Standard bruk — én primary-knapp per kontekst for den viktigste handlingen.
Varianter
Bruk primary for den viktigste handlingen. secondary og ghost for støttehandlinger. tertiary for lavprioriterte lenke-lignende handlinger.
Med ikon
Bruk icon-propen med en Icon-komponent. iconPosition styrer om ikonet vises til venstre (standard) eller høyre for teksten.
Lasteindikator
Bruk loader når en handling tar tid. Gi alltid textDescription for skjermlesere.
Deaktivert tilstand
Bruk disabled med varsomhet.
Migrering
Disse eksemplene viser hvordan du erstatter utfasede props med den anbefalte API-en.
Ikonknapper bruker nå én icon-prop
UtfaseticonLeft og iconRight er utfaset. Bruk icon-propen med en Icon-komponent, og styr plasseringen med iconPosition.
- Finn denne koden
<Button iconLeft={<Icon>add</Icon>}>Ny forsikring</Button> <Button iconRight={<Icon>arrow_forward</Icon>}>Se alle</Button> - Fjern iconLeft / iconRight-propen.
- Legg til icon-propen med samme Icon-komponent som verdi.
- Vil du ha ikonet til høyre? Legg til iconPosition="right".
- Erstatt med dette
<Button icon={<Icon>add</Icon>}>Ny forsikring</Button> <Button icon={<Icon>arrow_forward</Icon>} iconPosition="right">Se alle</Button>