Tag

A tag is a compact, non-intrusive label used to provide contextual information about content. Tags help users quickly understand what a section, item, or piece of content relates to without interrupting reading flow or demanding interaction.

Overview

The tag component is a simple text element designed to provide additional context to a piece of content.

It can be used to represent a category, section, or type of content. The component includes optional visual features such as a dot and a pill-shaped background to help distinguish it from plain text.


                                                        
                                                        
                                                            import { DsTag } from "@coloplast/design-system";

Example usage

Here’s an example of how to use the tag component with the required text prop and optional visual properties.


                                                        
                                                        
                                                            <DsTag text="News & media" type="pill" dot></DsTag>

Component playground and props

Here’s an interactive example of the component from Storybook. To explore and test the props, visit the ‘Controls’ tab on the story.

Accessibility

The tag component ensures sufficient colour contrast and readability of the text.