Tag - React

View on Figma View on GitHub

import { Tag } from '@sky-uk/ui-core';

<Tag src={bellLinear} label="Label" />

<Tag src={bellLinear} label="Label" />

Content

Prop	Description
label	Main text content displayed within the tag. The `label` describes the status of category of the Tag.
src	Optional icon source that can be displayed alongside the tag text. The `src` prop expects a partial SVG `path` of the icon that you want to render. It is recommend to use icons from the Skycons package. (See Skycons)

Props

Prop	Type	Options (* default)
$variant	string	`neutral`* \| `positive` \| `negative`

<Flex $gap={4} $flexWrap="wrap">
  <Tag $variant="neutral" label="Neutral" />
  <Tag $variant="positive" label="Positive" />
  <Tag $variant="negative" label="Negative" />
</Flex>

<Flex $gap={4} $flexWrap="wrap">
  <Tag $variant="neutral" label="Neutral" />
  <Tag $variant="positive" label="Positive" />
  <Tag $variant="negative" label="Negative" />
</Flex>

System Modifiers

The Tag component also supports the props applied using the following system modifiers: