Jøkul SuccessIcon

Jøkul · Ikoner

Pakke: @fremtind/jokul

SuccessIcon er et Jøkul-ikon som brukeren skal forstå at noe er vellykket fullført eller lagret.

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

SuccessIcon · filled og bold som standard

Skalerer med typografien

Brødtekst
Mellomtittel
Større fremheving

I kontekst

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

export function Example() {
    return (
        <span>
            <SuccessIcon aria-hidden="true" />
            <span>Endringen ble lagret</span>
        </span>
    );
}

HTML · html

<span>
    <span class="jkl-icon jkl-icon--bold jkl-icon--filled" aria-hidden="true"></span>
    <span>Endringen ble lagret</span>
</span>

Når du skal bruke SuccessIcon

SuccessIcon bør brukes når brukeren skal forstå at noe er vellykket fullført eller lagret.

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	SuccessIcon	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 forstå at noe er vellykket fullført eller lagret

Relatert

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