Tag
Compact inline labels for categorisation, status, and metadata. Use diwa-tag for static labels and diwa-tag-dismissible when the user needs to remove an item.
Variants
<diwa-tag variant="neutral">Neutral</diwa-tag>
<diwa-tag variant="primary">Primary</diwa-tag>
<diwa-tag variant="info">Info</diwa-tag>
<diwa-tag variant="success">Success</diwa-tag>
<diwa-tag variant="warning">Warning</diwa-tag>
<diwa-tag variant="error">Error</diwa-tag>Compact size
<diwa-tag variant="neutral" compact>Neutral</diwa-tag>
<diwa-tag variant="primary" compact>Primary</diwa-tag>
<diwa-tag variant="info" compact>Info</diwa-tag>
<diwa-tag variant="success" compact>Success</diwa-tag>
<diwa-tag variant="warning" compact>Warning</diwa-tag>
<diwa-tag variant="error" compact>Error</diwa-tag>With icon
<diwa-tag variant="success" icon="check-circle">Verified</diwa-tag>
<diwa-tag variant="error" icon="x-circle">Failed</diwa-tag>
<diwa-tag variant="warning" icon="alert-triangle">Pending</diwa-tag>
<diwa-tag variant="info" icon="info">Draft</diwa-tag>
<diwa-tag variant="primary" icon="star">Featured</diwa-tag>Dismissible tags
Click the ✕ on each tag to remove it from the list.
<diwa-tag-dismissible variant="neutral">React</diwa-tag-dismissible>
<diwa-tag-dismissible variant="neutral">TypeScript</diwa-tag-dismissible>
<diwa-tag-dismissible variant="neutral">Stencil</diwa-tag-dismissible>
<diwa-tag-dismissible variant="neutral">Design System</diwa-tag-dismissible>Dismissible — all variants
<diwa-tag-dismissible variant="neutral">Neutral</diwa-tag-dismissible>
<diwa-tag-dismissible variant="primary">Primary</diwa-tag-dismissible>
<diwa-tag-dismissible variant="info">Info</diwa-tag-dismissible>
<diwa-tag-dismissible variant="success">Success</diwa-tag-dismissible>
<diwa-tag-dismissible variant="warning">Warning</diwa-tag-dismissible>
<diwa-tag-dismissible variant="error">Error</diwa-tag-dismissible>