Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Tag

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Ikke interaktiv
    • Lengde
    • Plassering
  • Tilgjengelighet
  • Props
    • Tag
  • Tokens

Intro

Tag merker innhold med kategori, emne, status eller lignende. Dette kan forbedre oversikten for brukere. Tags ser ut som merkelapper som folk er vant til fra den fysiske verden.

Egnet til:

  • Kommunisere kategori, emne, status eller lignende.

Uegnet til:

  • Link til andre sider (se Link)
  • Handlinger (se Button)
  • Filtrering (se Chips)

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Husk å legge til 'aria-hidden' hvis ikonet bare er illustrativt.

Retningslinjer

Ikke interaktiv

Tag er ikke klikkbar, det er bare en merkelapp.

Lengde

En tag skal være kort og konkret, helst bare ett ord.

Plassering

Pass på at tags har god avstand til klikkbare elementer som buttons og chips. Står tags for nærme kan de oppfattes som klikkbare.

Tilgjengelighet

Tags har i seg selv ingen semantisk verdi. Hvis du ønsker dette, må du wrappe dem i semantiske elementer. Vil du for eksempel bruke flere tags sammen, bør du bruke en <ul> med en <li> for hver tag. Slik sikrer du at taggene blir lest opp hver for seg som en liste og ikke som en setning.

Props

Tag

variant

  • Type:
    "warning" | "warning-filled" | "warning-moderate" | "error" | "error-filled" | "error-moderate" | "info" | "info-filled" | "info-moderate" | "success" | "success-filled" | ... 12 more ... | "alt3-moderate"
  • Description:

size?

  • Type:
    "medium" | "small" | "xsmall"
  • Default:
    medium

icon?

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLSpanElement>
  • Description:

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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter

  • Button thumbnail
    Button
  • Chips thumbnail
    Chips

© 2025 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