Skip to content

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>