Jøkul InfoIcon

Jøkul · Ikoner

Pakke: @fremtind/jokul

InfoIcon er et Jøkul-ikon som brukeren skal få en ekstra forklaring eller rolig informasjonsstatus uten at det er en feil.

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

InfoIcon · filled og bold som standard

Skalerer med typografien

Brødtekst
Mellomtittel
Større fremheving

I kontekst

Mer informasjon er tilgjengelig

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

export function Example() {
    return (
        <span>
            <InfoIcon aria-hidden="true" />
            <span>Mer informasjon er tilgjengelig</span>
        </span>
    );
}

HTML · html

<span>
    <span class="jkl-icon jkl-icon--bold jkl-icon--filled" aria-hidden="true"></span>
    <span>Mer informasjon er tilgjengelig</span>
</span>

Når du skal bruke InfoIcon

InfoIcon bør brukes når brukeren skal få en ekstra forklaring eller rolig informasjonsstatus uten at det er en feil.

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	InfoIcon	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 skal få en ekstra forklaring eller rolig informasjonsstatus uten at det er en feil

Relatert

TextInput : Nyttig sammen med hjelpetekst og forklaringer rundt felt og skjemaer.
Installer Jøkul : Hent inn core og ikonstilene før du bruker Jøkul-ikonene lokalt.