Skip to main content Skip to navigation Skip to search

To use the tag component import the component in your JavaScript.

import '@cds/core/tag/register.js';

Status

Info Success Warning Danger

Color

Default Purple Blue Orange Light Blue

BadgesStatus

Info 1 Success 2 Warning 3 Danger 12

BadgesColor

No Badge Default 1 Purple 2 Blue 3 Orange 12 Light Blue 15

Clickable

Closable Disabled Default Info Success Warning Danger
Disabled 0 Default 0 Info 1 Success 2 Warning 3 Danger 12
Disabled Default Info Success Warning Danger
Disabled 0 Default 0 Info 1 Success 2 Warning 3 Danger 12

Purple Blue Orange Light Blue
Purple B Blue C Orange D Light Blue E
Purple Blue Orange Light Blue
Purple 1 Blue 1 Orange 1 Light Blue 1

Links

Closable

Default Purple Blue Orange Light Blue
Default Blue Orange

TagsAndIcons

No Icon No Badge Default 1 Purple 2 Blue 3 Orange 12 Light Blue 15
No Icon No Badge Info1 Success2 Warning3 Danger12

DarkTheme

Info 10 Success 20 Warning 30 Danger 40 Default 50 Disabled 60 Closable