Jøkul CheckIcon

Jøkul · Ikoner

Pakke: @fremtind/jokul

CheckIcon er et Jøkul-ikon som brukeren skal se at noe er valgt, godkjent eller fullført.

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

Denne eksporten rendres som nøytral linjevariant som standard, så docs-siden viser den slik komponenter normalt vil møte den i praksis.

Eksempel

CheckIcon · nøytral linjevariant som standard

Skalerer med typografien

Brødtekst
Mellomtittel
Større fremheving

I kontekst

Valget er lagret

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

export function Example() {
    return (
        <span>
            <CheckIcon aria-hidden="true" />
            <span>Valget er lagret</span>
        </span>
    );
}

HTML · html

<span>
    <span class="jkl-icon" aria-hidden="true"></span>
    <span>Valget er lagret</span>
</span>

Når du skal bruke CheckIcon

CheckIcon bør brukes når brukeren skal se at noe er valgt, godkjent eller fullført.

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	CheckIcon	Navnet du importerer fra `@fremtind/jokul/icon`.
Import	@fremtind/jokul/icon	Jøkul samler ikonene i samme ikoninngang som den felles wrapperen.
Standardstil	nøytral linjevariant som standard	Det er denne varianten komponentene normalt bruker som utgangspunkt.
Typisk bruk	status	brukeren skal se at noe er valgt, godkjent eller fullført

Relatert

Checkbox : Naturlig sammen med avhukede valg og bekreftede tilstander i skjemaer.
Installer Jøkul : Hent inn core og ikonstilene før du bruker Jøkul-ikonene lokalt.