Komponenter
Tag
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.
Eksempler
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
Hold tags på god avstand fra klikkbare elementer som knapper og chips, ellers kan de misforstås som interaktive.
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.
Tokens
Komponent-tokens ble fjernet i versjon 8
Props
Tag
variant?
- Type:"outline" | "moderate" | "strong" | HiddenVariant
- Default:outline
- Description:
Changes visual profile of tag
size?
- Type:"medium" | "small" | "xsmall"
- Default:medium
icon?
- Type:ReactNode
- Description:
Tag Icon
data-color?
- Type:"accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
- Default:"neutral"
- Description:
Tag color
className?
- Type:string
ref?
- Type:Ref<HTMLSpanElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Forvalter
