Tag

Oppdatert 11. oktober 2023Stabil

Å 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

Sandbox

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.

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å.

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

Token	Fallback
--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.

Tag

Intro