Skip to content
Home

Tag

Info
Demos
Properties
Events

Import

import { Tag } from '@dnb/eufemia'

Description

The Tag is a compact element for displaying discrete information.
The component should have a clear and helpful relationship to the content or task it represents.
For example, a Tag can be used to display a category of an item.

Tags with the onDelete-property can be used to define an action. A clickable tag will change appearance on focus, hover, and click.

Demos

Tag

There are three interactive tag variants:

  • clickable (can also accept a custom icon as it does not have on of its own)
  • addable
  • removable (also triggers onClick when pressing the Delete or Backspace keyboard key (keyup event), can be disabled with the omitOnKeyUpDeleteEvent property)

We require <Tag>-components to be wrapped by a <Tag.Group>-component. The required label-property in <Tag.Group> will ensure the correct use of accessibility for screen readers.

Interactable tags
Code Editor
<Tag.Group label="Interactable tags">
  <Tag
    variant="clickable"
    onClick={() => 'click'}
  >
    Clickable
  </Tag>
  <Tag
    variant="addable"
    onClick={() => 'click'}
  >
    Addable
  </Tag>
  <Tag
    variant="removable"
    onClick={() => 'click'}
  >
    Removable
  </Tag>
</Tag.Group>

Non-interactive tag

  • Not interactable
  • Can have icon

Non-interactable tags are simply made by skipping all callback properties, and are the only type that can have an icon.

Payment typesDigipostAvtaleGiro

Non-interactive tag with icon

BetalingstyperAvtaleGiroeFakturaDigiPost

Usage examples

Multiple removable tags

Removable tags can for example be used in filter lists. This is a simple example on how to implement a filter list using removable Tags.

Selected
Genres Selected
Removed
Genres Available
Code Editor
const Genres = () => {
  const [tagsAdded, setTagsAdded] = React.useState([
    {
      key: 0,
      text: 'Action',
    },
    {
      key: 1,
      text: 'Comedy',
    },
    {
      key: 2,
      text: 'Drama',
    },
    {
      key: 3,
      text: 'Horror',
    },
  ])
  const [tagsRemoved, setTagsRemoved] = React.useState([
    {
      key: 4,
      text: 'Fantasy',
    },
  ])
  const handleRemove = React.useCallback(
    (tagToRemove) => () => {
      setTagsAdded(tagsAdded.filter((tag) => tag.key !== tagToRemove.key))
      setTagsRemoved([...tagsRemoved, tagToRemove])
    },
    [tagsAdded, tagsRemoved],
  )
  const handleAdd = React.useCallback(
    (tagToAdd) => () => {
      setTagsAdded([...tagsAdded, tagToAdd])
      setTagsRemoved(tagsRemoved.filter((tag) => tag.key !== tagToAdd.key))
    },
    [tagsAdded, tagsRemoved],
  )
  return (
    <Flex.Stack>
      <FieldBlock label="Selected">
        <Tag.Group label="Genres Selected">
          {tagsAdded.map((tag) => {
            return (
              <Tag
                key={tag.key}
                text={tag.text}
                variant="removable"
                onClick={handleRemove(tag)}
              />
            )
          })}
        </Tag.Group>
      </FieldBlock>
      <FieldBlock label="Removed">
        <Tag.Group label="Genres Available">
          {tagsRemoved.map((tag) => {
            return (
              <Tag
                key={tag.key}
                text={tag.text}
                variant="addable"
                onClick={handleAdd(tag)}
              />
            )
          })}
        </Tag.Group>
      </FieldBlock>
    </Flex.Stack>
  )
}
render(<Genres />)

Tag used inside text

Text InlineFirst betweenSecondThird Text
Code Editor
Text{' '}
<Tag.Group label="Inline">
  <Tag text="First" /> between
  <Tag text="Second" />
  <Tag text="Third" />
</Tag.Group>{' '}
Text

Tag used as skeleton

SkeletonsSkeletonSkeletonSkeleton
Code Editor
<Tag.Group label="Skeletons">
  <Tag skeleton text="Skeleton" />
  <Tag skeleton text="Skeleton" />
  <Tag skeleton text="Skeleton" />
</Tag.Group>