Jøkul ErrorIcon

Jøkul · Ikoner

Pakke: @fremtind/jokul

ErrorIcon er et Jøkul-ikon som brukeren må forstå at noe er feil og trenger oppmerksomhet før arbeidet kan fortsette.

Eksporten `ErrorIcon` bygger på Jøkul sin felles Icon-wrapper og bruker materialsymbol-fonten som følger med ikonstilene.

Denne eksporten rendres som filled og bold som standard, så docs-siden viser den slik komponenter normalt vil møte den i praksis.

Eksempel

ErrorIcon · filled og bold som standard

Skalerer med typografien

Brødtekst
Mellomtittel
Større fremheving

I kontekst

Feltet har en feil som må rettes

Kode

React · tsx

import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/icon/icon.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import { ErrorIcon } from "@fremtind/jokul/icon";

export function Example() {
    return (
        <span>
            <ErrorIcon aria-hidden="true" />
            <span>Feltet har en feil som må rettes</span>
        </span>
    );
}

HTML · html

<span>
    <span class="jkl-icon jkl-icon--bold jkl-icon--filled" aria-hidden="true"></span>
    <span>Feltet har en feil som må rettes</span>
</span>

Når du skal bruke ErrorIcon

ErrorIcon bør brukes når brukeren må forstå at noe er feil og trenger oppmerksomhet før arbeidet kan fortsette.

Statusikoner fungerer best når de støtter en tydelig tekstlig etikett eller melding, ikke når de alene skal bære hele betydningen.

Bruk samme ikon konsekvent for samme type status på tvers av flater.
La farge, ikon og tekst støtte hverandre i stedet for å legge all betydning i én kanal.

Tilgjengelighet

Statusikoner må kombineres med tekst som forklarer hva brukeren skal forstå eller gjøre videre.

Ikonet alene er sjelden nok for skjermlesere eller for brukere som ikke skiller farger og symboler raskt.

Skjul dekorative ikoner med `aria-hidden="true"` når teksten rundt allerede forklarer meningen.
Hvis ikonet brukes alene i en knapp eller lenke, må kontrollen få et tydelig tilgjengelig navn.

Ikonkontrakt

Felt	Verdi	Notat
Eksport	ErrorIcon	Navnet du importerer fra `@fremtind/jokul/icon`.
Import	@fremtind/jokul/icon	Jøkul samler ikonene i samme ikoninngang som den felles wrapperen.
Standardstil	filled og bold som standard	Det er denne varianten komponentene normalt bruker som utgangspunkt.
Typisk bruk	status	brukeren må forstå at noe er feil og trenger oppmerksomhet før arbeidet kan fortsette

Relatert

TextInput : Brukes ofte sammen med feilmeldinger og valideringsstatus i skjemaer.
Installer Jøkul : Hent inn core og ikonstilene før du bruker Jøkul-ikonene lokalt.