Skip to main navigationSkip to main content
Return to Sky UI homepage

Tag - React

View on FigmaView on GitHub
import { Tag } from '@sky-uk/ui-core';
<Tag src={bellLinear} label="Label" />

Content

PropDescription
label
Main text content displayed within the tag. The label describes the status or 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 recommended to use icons from the Skycons package. (See Skycons)

Props

PropType
Options (* default)
$variantstring
neutral* | positive | negative
<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: