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
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" - Default:
"null" - Description:
Changes visual profile of tag
size?
- Type:
"medium" | "small" | "xsmall" - Default:
"medium"
icon?
- Type:
ReactNode - Description:
Tag Icon
className?
- Type:
string
data-color?
- Type:
AkselColor | (string & {})
ref?
- Type:
LegacyRef<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
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
| 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 |