Tag

Usage

import { Tag } from "@govtechmy/myds-react/tag";

export default () => (
  <Tag size="medium" dot={true}>Default</Tag>
  <Tag size="small" dot={false} variant="warning" mode="default">
    <span>Default</span>
  </Tag>
);

Examples

Variant

Use the variant props to change the visual style variant of the tag. The current options supported are default, primary, success, danger, and warning.

Guidelines

1. primary is related to product's brand.
2. success to represents a successful outcome.
3. danger to indicates a critical issue or error.
4. warning to warn user of a potential issue.

Size

Use the size props to change the size of the tag component. The current options supported are small, medium, and large.

Mode

Use the mode props to change the type of the tag component. The default mode gives the tag a slightly rounded edges, while pill mode gives it a fully rounded appearance.

Dot

The dot props to toggle the dot appearance. The optional status dot can act as visual indicator to represent the current state or status of an item.

Props

Tag