Installation
import { Tag } from "@octopusdeploy/design-system-components"
Properties
Using the Tag component
A Tag requires at minimum the label to be specified.
<Tag label="Development" />
Prefix
The prefix prop can be used to add an Icon or Avatar to the front of the Tag.
Icons should use size 16:
<Tag label="Development" prefix={<MachineTargetIcon size={16} />} />
Avatars should use size small:
<Tag label="My project" prefix={<Avatar type="project" size="small" src="" />} />
Dismissible tags
Tags can be made dismissible by providing the onDismiss callback. This will show a dismiss button on the tag, executing this callback when clicked.
<Tag label="Development" onDismiss={() => handleDismiss()} />