Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Tag

Oppdatert 6. juli 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    Å merke en situasjon med emner eller statuser kan forbedre oversikten for brukere. Det er en måte å samle kortfattet informasjon om en situasjon på ett sted, slik at brukere kan få informasjonen de trenger med et blikk. Tags ser ut som merkelapper som folk er vant til fra den fysiske verden.

    Egnet til:

    • Statisk metadata
    • Kommunisere fremdrift, kategori, status eller prosess

    Uegnet til:

    • Link til andre sider (se Link-komponenten)
    • Handlinger (se Button-komponenten)
    • Filtrering (se Chip-komponenten)

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Retningslinjer

    Statisk

    Tags i seg selv er statiske ting, men innholdet er ofte dynamisk informasjon (status, fremdrift, etc). Dvs. du kan ikke klikke på en tag, det er bare en merkelapp. Men innholdet i tag'en kan endre seg.

    Tekstlengde

    Tags står ofte i kontekster hvor det er lite plass til mye tekst. Hold teksten så kort som mulig uten at det går på bekostning av kommunikasjon. Helst ett nøkkelord, men maks to.

    Størrelser

    Tags kommer i 3 størrelser (medium, small og xsmall) for å passe til de fleste situasjoner og fremdeles være godt synlige.

    Tags i 3 størrelser

    Plassering

    Tags plasseres godt synlig i nærheten av navnet, tittelen eller hoveddelen av et objekt. Tags kan kommunisere viktig informasjon og må være lett å få øye på.

    Informasjon

    Hold tags og klikkbare komponenter fra hverandre

    Pass på at tags er plassert med god avstand til klikkbare elementer i løsningen din (f.eks buttons eller chips). Står tags for nærme kan de se klikkbare ut.

    Tilgjengelighet

    Tags har ingen semantisk verdi ved default. Du må selv wrappe dem i semantiske elementer hvis du vil at de får semantisk verdi. F.eks., vil du bruke flere tags sammen, bør du bruke en `<ul>` med en `<li>` for hver tag for å sikre at tagsene blir lest opp hver for seg som en liste og ikke som en setning.

    Props

    Tag

    variant "warning" | "warning-filled" | "warning-moderate" | "error" | "error-filled" | "error-moderate" | "info" | "info-filled" | "info-moderate" | "success" | "success-filled" | ... 12 more ... | "alt3-moderate"
    Changes visual profile of tag
    size?"medium" | "small" | "xsmall"
    className? string
    ref? Ref<HTMLSpanElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Tag extends HTMLSpanElement

    Tokens

    TokenFallback
    --ac-tag-error-border--a-border-danger
    --ac-tag-error-bg--a-surface-danger-subtle
    --ac-tag-error-text--a-text-default
    --ac-tag-error-filled-bg--a-surface-danger
    --ac-tag-error-filled-text--a-text-on-danger
    --ac-tag-error-moderate-bg--a-surface-danger-moderate
    --ac-tag-error-moderate-text--a-text-default
    --ac-tag-success-border--a-border-success
    --ac-tag-success-bg--a-surface-success-subtle
    --ac-tag-success-text--a-text-default
    --ac-tag-success-filled-bg--a-surface-success
    --ac-tag-success-filled-text--a-text-on-success
    --ac-tag-success-moderate-bg--a-surface-success-moderate
    --ac-tag-success-moderate-text--a-text-default
    --ac-tag-warning-border--a-border-warning
    --ac-tag-warning-bg--a-surface-warning-subtle
    --ac-tag-warning-text--a-text-default
    --ac-tag-warning-filled-bg--a-surface-warning
    --ac-tag-warning-filled-text--a-text-on-warning
    --ac-tag-warning-moderate-bg--a-surface-warning-moderate
    --ac-tag-warning-moderate-text--a-text-default
    --ac-tag-info-border--a-border-info
    --ac-tag-info-bg--a-surface-info-subtle
    --ac-tag-info-text--a-text-default
    --ac-tag-info-filled-bg--a-surface-info
    --ac-tag-info-filled-text--a-text-on-info
    --ac-tag-info-moderate-bg--a-surface-info-moderate
    --ac-tag-info-moderate-text--a-text-default
    --ac-tag-neutral-border--a-border-default
    --ac-tag-neutral-bg--a-surface-neutral-subtle
    --ac-tag-neutral-text--a-text-default
    --ac-tag-neutral-filled-bg--a-surface-neutral
    --ac-tag-neutral-filled-text--a-text-on-neutral
    --ac-tag-neutral-moderate-bg--a-surface-neutral-moderate
    --ac-tag-neutral-moderate-text--a-text-default
    --ac-tag-alt-1-border--a-border-alt-1
    --ac-tag-alt-1-bg--a-surface-alt-1-subtle
    --ac-tag-alt-1-text--a-text-default
    --ac-tag-alt-1-filled-bg--a-surface-alt-1
    --ac-tag-alt-1-filled-text--a-text-on-alt-1
    --ac-tag-alt-1-moderate-bg--a-surface-alt-1-moderate
    --ac-tag-alt-1-moderate-text--a-text-default
    --ac-tag-alt-2-border--a-border-alt-2
    --ac-tag-alt-2-bg--a-surface-alt-2-subtle
    --ac-tag-alt-2-text--a-text-default
    --ac-tag-alt-2-filled-bg--a-surface-alt-2
    --ac-tag-alt-2-filled-text--a-text-on-alt-2
    --ac-tag-alt-2-moderate-bg--a-surface-alt-2-moderate
    --ac-tag-alt-2-moderate-text--a-text-default
    --ac-tag-alt-3-border--a-border-alt-3
    --ac-tag-alt-3-bg--a-surface-alt-3-subtle
    --ac-tag-alt-3-text--a-text-default
    --ac-tag-alt-3-filled-bg--a-surface-alt-3
    --ac-tag-alt-3-filled-text--a-text-on-alt-3
    --ac-tag-alt-3-moderate-bg--a-surface-alt-3-moderate
    --ac-tag-alt-3-moderate-text--a-text-default

    Relaterte komponenter

    • Button thumbnail
      Button
    • Chips thumbnail
      Chips

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack