Category Tag

This tag is used to represent categories that customers define themselves, such as region or internal concept labels. Since there's no fixed entity to anchor to, colour becomes the primary identity signal, chosen from a curated swatch set or a custom hex value.

Installation

import { CategoryTag } from "@octopusdeploy/design-system-components"

Source code

Published on GitHub

Live demo

Published on Storybook

Component Package

Published on npm

Properties

Using the CategoryTag component

A CategoryTag requires a label and color to be specified.


                                                        
                                                        
                                                            <CategoryTag label="My Category" color="#1A77CA" />

No prefix is supported for the CategoryTag. It is always displayed with a tag icon.

Dismissible tags

CategoryTags can be made dismissible by providing the onDismiss callback. This will show a dismiss button on the tag, executing this callback when clicked.


                                                        
                                                        
                                                            <CategoryTag label="My Category" color="#1A77CA" onDismiss={() => handleDismiss()} />

Category Tag

Installation

Properties

Using the CategoryTag component

Dismissible tags

Design Resources

Engineering Resources

Slack Channels