Designsystemoversikt

Tag

Tag brukes som en liten status- eller kategorimarkør som gjør det mulig å skanne lister, kort og tabeller raskt.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

Tag er en enkel display-komponent i Jøkul for korte statuser og kategorier. Den er liten i flaten, men viktig for oversikt når mange elementer skal skannes raskt.

Lokale docs bør vise hvordan variant og tekst spiller sammen, fordi det er kombinasjonen av disse som gjør statusen forståelig i praksis.

Playgrounden under lar deg veksle mellom vanlige tag-varianter og etiketter uten å introdusere unødvendig interaktiv kompleksitet.

Eksempel

Props

    • variant="neutral" · children="Utkast"

    Artikkelstatus

    Utkast

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/tag/tag.min.css";
import { Tag } from "@fremtind/jokul/tag";

export function Example() {
    return <Tag>Utkast</Tag>;
}

    Props

    Jøkul-props

    Jøkul-props som styrer hvilken variant og dermed hvilken tonalitet taggen får.

    Prop Type Standard Beskrivelse
    variant "neutral" | "info" | "warning" | "error" | "success" "neutral" Bestemmer hvilken status- eller tonalitetsvariant taggen bruker.

    React-props

    React-props som styrer innhold og lokal integrasjon rundt taggen.

    Prop Type Standard Beskrivelse
    children ReactNode påkrevd Teksten som forklarer hva taggen betyr.
    className string ingen Ekstra klasse hvis taggen må kobles til lokal layout eller analyse.

    Native HTML-props

    Vanlige HTML-attributter som kan brukes på den underliggende `<span>`-taggen.

    Prop Type Standard Beskrivelse
    title string ingen Kan brukes når du vil gi ekstra forklaring ved hover uten å endre den synlige tagteksten.

    ARIA-props

    Tilgjengelighetsattributter for sammensatte brukstilfeller der taggen inngår i en større kontroll.

    Prop Type Standard Beskrivelse
    aria-label string ingen Brukes når taggen inngår i en mer sammensatt kontroll og trenger et mer presist tilgjengelig navn.

    Når du skal bruke Tag

    Bruk Tag når du trenger en kompakt markør for status, kategori eller livssyklus, og når teksten må være lett å skanne i sammenheng med annet innhold.

    Hvis brukeren trenger en hel melding eller tydelig neste steg, er system message eller annen rikere feedback ofte bedre enn en tag.

    Tilgjengelighet

    Tagger bruker ofte farge for å gi rask orientering, men meningen må også ligge i teksten for å være robust og forståelig.

    Hvis taggen inngår i en større kontroll, må hele kontrollen fortsatt ha et tydelig navn og riktig fokusoppførsel.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Ingen
    Dekket API-props
    1
    Playground-kontroller
    2
    Delkomponenter
    0
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/tag/tag.min.css

    Ikonkontrakt

    Bruk: Ingen

    Komponenten krever ingen egen ikonkontrakt i grunnoppsettet.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • Tag · TagProps · @fremtind/jokul/tag · 1 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: Tag er ikke interaktiv i seg selv og har derfor ingen egen tastaturkontrakt utover eventuell kontroll den ligger inni.

    Semantikk som kreves

    • Tag bør brukes som en kort status- eller kategorimarkør, ikke som eneste bærer av viktig informasjon.
    • Hvis taggen faktisk skal være klikkbar, bør den pakkes i en kontroll med tydelig navn og forventet fokusatferd.
    • Teksten i taggen må være konkret nok til å forstås uten å lene seg fullt på farge.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at statusen fortsatt er forståelig uten farge alene.
    • Bekreft at taggen ikke forveksles med en knapp eller et filter hvis den bare er ment som visning.

    Ytelse

    • Tag er en liten ren CSS-komponent og har ingen egen klient-JS i docs.
    • Bruk korte etiketter så taggene ikke presser layouten unødig i tabeller og kortlister.

    Relatert