Jøkul WarningIcon

Jøkul · Ikoner

Pakke: @fremtind/jokul

WarningIcon er et Jøkul-ikon som brukeren bør stoppe opp og lese en advarsel eller viktig merknad.

Eksporten `WarningIcon` 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

WarningIcon · filled og bold som standard

Skalerer med typografien

Brødtekst
Mellomtittel
Større fremheving

I kontekst

Sjekk informasjonen før du går videre

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 { WarningIcon } from "@fremtind/jokul/icon";

export function Example() {
    return (
        <span>
            <WarningIcon aria-hidden="true" />
            <span>Sjekk informasjonen før du går videre</span>
        </span>
    );
}

HTML · html

<span>
    <span class="jkl-icon jkl-icon--bold jkl-icon--filled" aria-hidden="true"></span>
    <span>Sjekk informasjonen før du går videre</span>
</span>

Når du skal bruke WarningIcon

WarningIcon bør brukes når brukeren bør stoppe opp og lese en advarsel eller viktig merknad.

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	WarningIcon	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 bør stoppe opp og lese en advarsel eller viktig merknad

Relatert

Installer Jøkul : Hent inn core og ikonstilene før du bruker Jøkul-ikonene lokalt.