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
Vurder noe annet:
- Om du vil koble noe sammen med en link
- Om du trenger en knapp foreslår vi Button-komponenten
- Om du trenger å filtrere innhold kan du vurdere Chip-komponenten, som er tilpasset dette formålet
Har du innspill til komponenten?
Send forslagVarianter
Beskriver noe nøytralt
Beskriver noe som er til opplysning, nyhet, etc.
Beskriver noe som er positivt, gjennomført, vellykket, etc.
Beskriver noe som er en advarsel, usikkert, noe som må utbedres, etc.
Beskriver noe som er farlig, tjenestebrudd, irreversibelt, etc.
Har ingen global betydning. Tjenesten/produktet kan bestemme hva de symboliserer.
Har ingen global betydning. Tjenesten/produktet kan bestemme hva de symboliserer.
Har ingen global betydning. Tjenesten/produktet kan bestemme hva de symboliserer.
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" | "error" | "error-filled" | "info" | "info-filled" | "success" | "success-filled" | "neutral" | "neutral-filled" | "alt1" | "alt1-filled" | "alt2" | "alt2-filled" | "alt3" | "alt3-filled"
- Changes visual profile of tag
- size?"medium" | "small" | "xsmall"
- className? string
- ref? Ref<HTMLSpanElement>
- 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-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-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-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-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-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-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-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 |
