Components

Tag

Tag is a label that can be used to categorize items or communicate progress, status, or process. Tags can provide users with a quicker overview of content.

Overview Code Accessibility

HTML

HTMLReact

Press Enter to start editing

Unable to parse html

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

render(<Preview />)

Usage

Apply the class name ds-tag to the element that should be a tag. You can set variant="outline" to add an outline to the tag.

CSS variables and data attributes

Size is controlled with data-size and color with data-color. The component inherits these from the closest parent where they are set.

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

CSS Variables
Name	Value
--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 Attributes
Name	Value
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

Edit this page on github.com (opens in a new tab)