Tag

Info
Demos
Properties
Events

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-prop can be used to define an action. A clickable tag will change appearance on focus, hover, and click.

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.
See more examples below.

Payment types:DigipostAvtaleGiro
<Tag.Group label="Payment types:">

  <Tag>Digipost</Tag>

  <Tag>AvtaleGiro</Tag>

</Tag.Group>

Tag with icon

Betalingstyper:AvtaleGiroeFakturaDigiPost
<Tag.Group label="Betalingstyper:">

  <Tag icon={AInvoice} text="AvtaleGiro" />

  <Tag icon={EInvoice} text="eFaktura" />

  <Tag icon={DigiPost} text="DigiPost" />

</Tag.Group>

Removable tag

Use the onDelete-prop to make a tag removable. A removable tag supports adds a onClick-event to the underlying Button-component.
Removable tags will not support the icon-prop and will also be ignored if a onClick-prop is defined.

Files:
<Tag.Group label="Files:">

  <Tag text='Eufemia.tsx' onDelete={() => { console.log("I was deleted!")}}/>

</Tag.Group>

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:
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}

              onDelete={handleDelete(tag)}

            />

        );

      })

    }

    </Tag.Group>

  )

}

render(<Genres />)

Tag used inside text

Text Inline:First betweenSecondThird Text
Text <Tag.Group label="Inline:">

  <Tag text="First" /> between 

  <Tag text="Second" />

  <Tag text="Third" />

</Tag.Group> Text

Tag used as skeleton

Skeletons:SkeletonSkeletonSkeleton
<Tag.Group label="Skeletons:">

  <Tag skeleton text="Skeleton" /> 

  <Tag skeleton text="Skeleton" />

  <Tag skeleton text="Skeleton" />

</Tag.Group>