---
title: "Tag — React"
canonical: https://sky-ui.cf.sky.com/components/tag/react
apiPackages: [{"name":"@sky-uk/skycons","representedVersion":"4.13.0"},{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Tag — React

A Label that shows a status or a category or describes the urgency.

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

---

```tsx

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

```

---

## Content

| Prop | Description |
| --- | --- |
| 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)](/skycons/) |

## Props

| Prop | Type | Options (__*__ _default_) |
| --- | --- | --- |
| $variant | string | `neutral`__*__ \| `positive` \| `negative` |

---

```tsx
<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:

- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)