Komponenter
Alert
Alert tiltrekker brukerens oppmerksomhet til viktige opplysninger og varsler. Komponenten har flere varianter du kan bruke for å tilpasse den til budskapet i varselet.
Egnet til:
- Kort informativ varselsmelding
Uegnet til:
- Toast
- Som eneste innhold på en side
Eksempler
Retningslinjer
Antall per side
Hvis du har flere alerts på samme side vil de stjele oppmersomhet fra hverandre. Tenk spesielt over bruken av info-varianten. Den skal ikke brukes som et dekorativt panel.
Ikke lag andre versjoner
Det er viktig at alerts har samme utseende og formspråk på tvers av produktene, så den skal ikke justeres.
Lenker
Lenker i komponenten skal være svart med underline for å ivareta fargekontrast. Dette skjer automatisk hvis du bruker Link-komponenten.
Innhold
Det er ikke alle som har en intuitiv forståelse av betydningen av ikonene og fargene, derfor er det viktig at ordene du velger gjør det åpenbart for brukerne hvordan de skal forholde seg til informasjonen i varselet. Særlig for feilmeldinger er det viktig at du forteller om det er noe de må eller kan gjøre for å komme videre med oppgaven sin.
Knapper
Hvis du legger til egne knapper i alerten, bruk kun secondary-neutral. Ikke bruk knapper i inline-varianten.
Tilgjengelighet
Alternativtekst
Ikonene har default alternativtekst som kommuniserer alvorlighetsgrad: "Informasjon", "Suksess", "Advarsel" og "Feil". Den alternative teksten blir presentert som en del av innholdet for skjermleserbrukere.
Interaksjon med skjermleser
Alert-komponenten presenteres som vanlig statisk innhold for skjermleserbrukere. Benyttes variant="error" er det sannsynlig at beskjeden krever brukerens umiddelbare oppmerksomhet eller handlinger. Da kan du legge til role="alert" som gjør at innholdet i komponenten leses opp umiddelbart.
Hvis du bruker variant="warning" eller variant="success", kan du vurdere å bruke role="status". Da skal skjermlesere gjøre seg ferdig med det som leses før innholdet i Alert leses opp.
Ved bruk av varianten "info" trengs ikke role="alert" eller role="status".
Props
Alert
children
- Type:
ReactNode - Description:
Alert content.
variant
- Type:
"error" | "warning" | "info" | "success" - Default:
"null" - Description:
Level of severity. Changes colors and icon.
size?
- Type:
"medium" | "small" - Default:
"medium" - Description:
Changes padding and font-sizes.
fullWidth?
- Type:
boolean - Default:
false - Description:
Removes
border-radius.
contentMaxWidth?
- Type:
boolean - Default:
true - Description:
Sets max-width on the content to 43.5rem.
inline?
- Type:
boolean - Default:
false - Description:
Removes background, border and padding.
closeButton?
- Type:
boolean - Default:
false - Description:
Adds a close-button (X).
Requires onClose to be set.
onClose?
- Type:
(() => void) - Description:
Callback for alert wanting to close.
Requires closeButton to be true.
data-color?
- Type:
undefined - Description:
Overriding Alert color is not supported.
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
| Token | Fallback |
|---|---|
| --ac-alert-error-border | --a-border-danger |
| --ac-alert-error-bg | --a-surface-danger-subtle |
| --ac-alert-icon-error-color | --a-icon-danger |
| --ac-alert-warning-border | --a-border-warning |
| --ac-alert-warning-bg | --a-surface-warning-subtle |
| --ac-alert-icon-warning-color | --a-icon-warning |
| --ac-alert-info-border | --a-border-info |
| --ac-alert-info-bg | --a-surface-info-subtle |
| --ac-alert-icon-info-color | --a-icon-info |
| --ac-alert-success-border | --a-border-success |
| --ac-alert-success-bg | --a-surface-success-subtle |
| --ac-alert-icon-success-color | --a-icon-success |