- Accordion
- Alert
- Breadcrumbs
- Button
- Card
- Checkbox
- CheckboxGroup
- Chips
- DatePicker
- DescriptionList
- ErrorMessage
- ErrorSummary
- Fieldset
- FileUploader
- Footer
- Icon
- IconButton
- InlineButton
- Link
- LinkGroup
- MegaButton
- Modal
- NavigationTile
- OpenClose
- Pagination
- Panel
- Popover
- RadioGroup
- RolePicker
- ScrollToTopButton
- SearchField
- Select
- Spinner
- StepList
- Table
- Tabs
- Tag
- TextArea
- TextField
- TopBannerExternal
- TopBannerInternal
- Typografi
- Versjonshistorikk
Tag
Pakke: ds-status
En Tag (merkelapp) markerer eller uthever noe i en farget liten boks, med kort tekst inni. Merkelappen er lett å få øye på og derfor en god måte å fortelle brukeren om en status eller tilleggsopplysning.
Eksempel
Egnet til:
- å vise statuser, kategorier eller nøkkelord.
- å utheve informasjon slik at brukeren raskt oppfatter den.
Uegnet til:
- å bruke mange på en side, slik at informasjonen drukner.
- å lenke til andre sider.
- handlinger – bruk heller Button
Teknisk dokumentasjon
Se Tag i Storybook for tekniske detaljer.
Varianter
Vi har to størrelser av merkelapp – medium og liten. Variantene har mulighet for å ha ikon.
Medium variant.
Liten variant.
Hvordan bruke komponenten
Fargebruk
Fargene i Tag reflekterer samme betydning som fargene i Panel.
- Gul – nøytral informasjon (standard).
- Rød – advarsel
- Grønn – suksess eller en tommel opp.
- Grå – nedtonet informasjon
Universell utforming
- Unngå blå tekst (lenke) på rød bakgrunn. Denne kombinasjonen har ikke tilstrekkelig kontrast.
- Ikoner i Tag er definert som pynt/dekor og skjules derfor for skjermleser. Det bør fremgå av teksten hva slags type status/informasjon som gis.