Skip to content
Home

Tag

Info
Demos
Properties
Events

Demos

Tag

To ensure the correct use of the Tags, we require using a <Tag.Group> with <Tag>-components as children. 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>
  • Clickable tag: Use the onClick-prop to make a tag clickable.
  • Addable tag: Use the onAdd-prop to make a tag addable. Adds onClick-event to the underlying <Button>-component. Does not support the icon-prop and will also be ignored if a onClick-prop is defined.
  • Removable tag: Use the onDelete-prop to make a tag removable. Adds onClick-event to the underlying <Button>-component. Does not support the icon-prop and will also be ignored if a onClick-prop is defined.

Non-interactive tag

  • Not interactable
  • Can have icon

Non-interactable tags are simply made by skipping all callback props, 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 example simple example on how to implement a filter list using removable Tags.
When a Tag is focused (e.g. when tabbing) releasing Backspace or Delete (keyup event) will call the onDelete-handler. This behavior can be omitted by setting the omitOnKeyUpDeleteEvent-prop to true.

Genres
Code Editor
const Genres = () => {
  const [tagData, setTagData] = React.useState([
    {
      key: 0,
      text: 'Action',
    },
    {
      key: 1,
      text: 'Comedy',
    },
    {
      key: 2,
      text: 'Drama',
    },
    {
      key: 3,
      text: 'Horror',
    },
    {
      key: 4,
      text: 'Fantasy',
    },
  ])
  const handleDelete = (tagToDelete) => () => {
    setTagData((tags) => tags.filter((tag) => tag.key !== tagToDelete.key))
  }
  return (
    <Tag.Group label="Genres">
      {tagData.map((tag) => {
        return (
          <Tag
            key={tag.key}
            text={tag.text}
            variant="removable"
            onClick={handleDelete(tag)}
          />
        )
      })}
    </Tag.Group>
  )
}
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>