Komponenter

Tag

Tag er en merkelapp som kan brukes til å kategorisere elementer eller kommunisere fremdrift, status eller prosess. Tags kan gi brukeren et raskere overblikk over innholdet.

Oversikt Kode Tilgjengelighet

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => {
  return <Tag>New</Tag>;
};

render(<Preview />)

Bruk

Legg klassenavnet ds-tag på elementet som skal være en tag. Du kan sette variant="outline" for å legge til ramme på taggen.

CSS variabler og data-attributter

Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.

CSS-variabler
Navn	Verdi
--dsc-tag-background	var(--ds-color-surface-tinted)
--dsc-tag-color	var(--ds-color-text-default)
--dsc-tag-min-height	var(--ds-size-8)
--dsc-tag-padding	0 var(--ds-size-2)
--dsc-tag-border-width	var(--ds-border-width-default)
--dsc-tag-border-color	transparent
--dsc-tag-border-style	solid

Data-attributter
Navn	Verdi
data-variant	outline

React

import { Tag } from "@digdir/designsystemet-react";
<Tag>Beta</Tag>;

variant
Description: The visual variant of the tag
Type: "default" | "outline"
Default: default

Name	Type	Default	Description
variant	`"default" \| "outline"`	default	The visual variant of the tag

Rediger denne siden på github.com (åpnes i ny fane)