# @fluentui/react-tags

> Fluent UI Tag component

Latest version **9.9.7** (published 2026-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-tags
pnpm add @fluentui/react-tags
yarn add @fluentui/react-tags
bun add @fluentui/react-tags
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.9.7 |
| Published | 2026-09-23 |
| First published | 2023-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 816.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20303 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-tags
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-tags

## Dependencies (11)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@griffel/react](https://npm.io/package/@griffel/react.md) ^1.5.32
- [@fluentui/react-aria](https://npm.io/package/@fluentui/react-aria.md) ^9.17.15
- [@fluentui/react-icons](https://npm.io/package/@fluentui/react-icons.md) ^2.0.245
- [@fluentui/react-theme](https://npm.io/package/@fluentui/react-theme.md) ^9.2.2
- [@fluentui/react-avatar](https://npm.io/package/@fluentui/react-avatar.md) ^9.11.8
- [@fluentui/keyboard-keys](https://npm.io/package/@fluentui/keyboard-keys.md) ^9.0.9
- [@fluentui/react-tabster](https://npm.io/package/@fluentui/react-tabster.md) ^9.26.18
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-jsx-runtime](https://npm.io/package/@fluentui/react-jsx-runtime.md) ^9.4.6
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4

## Recent versions

- 9.9.7 (latest) — 2026-09-23
- 0.0.0-nightly-20261002-0407.1 (nightly) — 2026-10-02
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 0.0.0-nightly-20260929-0404.1 — 2026-09-29
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 9.9.6 — 2026-09-21
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- 0.0.0-nightly-20260910-0408.1 — 2026-09-10
- … 849 more at https://npm.io/package/@fluentui/react-tags/versions

## README

# @fluentui/react-tags

**React Tags components for [Fluent UI React](https://react.fluentui.dev/)**

- `Tag` provides visual representation of an attribute, person or asset.
- `InteractionTag` follows the same characteristics as `Tag`, but with the added functionality of having a primary interaction.
- `TagGroup` is used to group multiple tags together.

## Usage

To import Tag:

```js
import { Tag, TagGroup, InteractionTag } from '@fluentui/react-components';
```

### Examples

### Tag

```jsx
// basic
<Tag>Content</Tag>
// with icon
<Tag icon={<SVGIcon />}>Content</Tag>
// different appearance
<Tag appearance='outlined'>Content</Tag>
// with dismiss icon
<Tag dismissible>Content</Tag>
// different size
<Tag size="small">Content</Tag>
```

### InteractionTag

```jsx
// basic
<InteractionTag>
  <InteractionTagPrimary>Content</InteractionTagPrimary>
</InteractionTag>

// with icon
<InteractionTag>
  <InteractionTagPrimary icon={<SVGIcon />}>Content</InteractionTagPrimary>
</InteractionTag>

// different appearance
<InteractionTag appearance="outlined">
  <InteractionTagPrimary>Content</InteractionTagPrimary>
</InteractionTag>

// with secondary action
<InteractionTag>
  <InteractionTagPrimary hasSecondaryAction>Content</InteractionTagPrimary>
  <InteractionTagSecondary />
</InteractionTag>

// different size
<InteractionTag size="small">
  <InteractionTagPrimary>Content</InteractionTagPrimary>
</InteractionTag>
```

### TagGroup

```jsx
<TagGroup>
  <Tag>Tag 1</Tag>
  <Tag>Tag 2</Tag>
  <Tag>Tag 3</Tag>
</TagGroup>
```

---
_Source: https://npm.io/package/@fluentui/react-tags · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._