Aksel

Meny

Komponenter / Core

Tag

Oppdatert Stabil
GithubYarn FigmaEndringslogg

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:

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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