The badge component is a simple, non-interactive Vue component that can be used to indicate the status of an element or draw attention to specific items, such as a new product or feature. Badges are typically used as read-only status indicators and should always be clearly positioned in relation to the object they are referencing.
Basic usage
Importing the component
To use the badge component, import it into your Vue project:
import { DsBadge } from "@coloplast/design-system";
Example usage
Below is a basic example of how to implement the badge component in your template:
<DsBadge text="New" variant="highlight"></DsBadge>
You may need to apply custom CSS to position the badge as per your design requirements, as the component defaults to an inline-block element.
Component playground and props
Explore the interactive badge component in Storybook. Adjust the available props in the 'Controls' tab to see the effects.
Alternatively, visit the Badge docs in Storybook.
Accessibility
The badge should always have text content, and the badge should never be used as an interactive element.
Known issues
The "highlight" variant currently does not meet sufficient colour contrast guidelines. There is an ongoing effort to adjust brand colours to improve accessibility, particularly for buttons and badges. If other variants fit your use case, favour using those instead.
A high-contrast theme is automatically provided for users with high contrast settings enabled in their operating system, ensuring the highlight variant will have sufficient contrast for those users.
Internationalisation
The badge component fully supports right-to-left (RTL) rendering.