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';

Info Success Warning Danger

Default Purple Blue Orange Light Blue

Status

Info 1 Success 2 Warning 3 Danger 12

Color

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

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

Default Purple Blue Orange Light Blue
Default Blue Orange

And icons

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

Theme

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