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