@fluentui/react-tags NPM

@fluentui/react-tags

React Tags components for Fluent UI React

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:

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

Examples

Tag

// 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

// 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

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

@fluentui/keyboard-keys @fluentui/react-aria @fluentui/react-avatar @fluentui/react-icons @fluentui/react-jsx-runtime @fluentui/react-shared-contexts @fluentui/react-tabster @fluentui/react-theme @fluentui/react-utilities @griffel/react @swc/helpers

@everything-registry/sub-chunk-330 @fluentui/react-tag-picker @fluentui/react-tag-picker-preview @fluentui/react-components

9.3.6

2 days ago

0.0.0-nightly-20240517-0405.1

5 days ago

0.0.0-nightly-20240520-0407.1

2 days ago

9.3.5

6 days ago

0.0.0-nightly-20240516-0406.1

6 days ago

0.0.0-nightly-20240515-0405.1

7 days ago

0.0.0-nightly-20240514-0405.1

8 days ago

0.0.0-nightly-20240513-0408.1

9 days ago

9.3.4

12 days ago

0.0.0-nightly-20240510-0407.1

12 days ago

0.0.0-nightly-20240509-0405.1

13 days ago

0.0.0-nightly-20240508-0405.1

14 days ago

0.0.0-nightly-20240506-0407.1

16 days ago

0.0.0-nightly-20240507-0407.1

15 days ago

9.3.3

16 days ago

9.3.2

20 days ago

0.0.0-nightly-20240503-0405.1

19 days ago

0.0.0-nightly-20240502-0405.1

20 days ago

0.0.0-nightly-20240501-0406.1

21 days ago

0.0.0-nightly-20240430-0406.1

22 days ago

0.0.0-nightly-20240429-0407.1

23 days ago

0.0.0-nightly-20240426-0405.1

26 days ago

0.0.0-nightly-20240425-0408.1

27 days ago

0.0.0-nightly-20240424-0405.1

28 days ago

0.0.0-nightly-20240423-0406.1

29 days ago

9.3.1

29 days ago

0.0.0-nightly-20240422-0407.1

30 days ago

0.0.0-nightly-20240419-0408.1

1 month ago

0.0.0-nightly-20240418-0406.1

1 month ago

9.3.0

1 month ago

0.0.0-nightly-20240417-0406.1

1 month ago

0.0.0-nightly-20240415-0407.1

1 month ago

0.0.0-nightly-20240411-0405.1

1 month ago

0.0.0-nightly-20240409-0405.1

1 month ago

0.0.0-nightly-20240408-0406.1

1 month ago

0.0.0-nightly-20240405-0409.1

2 months ago

0.0.0-nightly-20240404-0406.1

2 months ago

0.0.0-nightly-20240403-0405.1

2 months ago

9.2.1

2 months ago

0.0.0-nightly-20240402-0405.1

2 months ago

0.0.0-nightly-20240401-0408.1

2 months ago

0.0.0-nightly-20240329-0405.1

2 months ago

0.0.0-nightly-20240328-0407.1

2 months ago

0.0.0-nightly-20240327-0404.1

2 months ago

0.0.0-nightly-20240326-0405.1

2 months ago

9.2.0

2 months ago

0.0.0-nightly-20240325-0409.1

2 months ago

0.0.0-nightly-20240322-0406.1

2 months ago

0.0.0-nightly-20240321-0406.1

2 months ago

0.0.0-nightly-20240320-0406.1

2 months ago

0.0.0-nightly-20240319-0405.1

2 months ago

9.1.3

2 months ago

0.0.0-nightly-20240318-0408.1

2 months ago

9.1.2

2 months ago

0.0.0-nightly-20240315-0408.1

2 months ago

0.0.0-nightly-20240314-0406.1

2 months ago

0.0.0-nightly-20240312-0405.1

2 months ago

0.0.0-nightly-20240313-0405.1

2 months ago

0.0.0-nightly-20240311-0406.1

2 months ago

0.0.0-nightly-20240308-0405.1

2 months ago

9.1.1

3 months ago

0.0.0-nightly-20240307-0406.1

3 months ago

0.0.0-nightly-20240306-0405.1

3 months ago

0.0.0-nightly-20240305-1651.1

3 months ago

0.0.0-nightly-20240305-0405.1

3 months ago

0.0.0-nightly-20240304-0405.1

3 months ago

0.0.0-nightly-20240301-0405.1

3 months ago

9.1.0

3 months ago

0.0.0-nightly-20240228-0405.1

3 months ago

9.0.29

3 months ago

0.0.0-nightly-20240229-0406.1

3 months ago

0.0.0-nightly-20240226-0407.1

3 months ago

0.0.0-nightly-20240227-0405.1

3 months ago

0.0.0-nightly-20240222-0407.1

3 months ago

0.0.0-nightly-20240223-0405.1

3 months ago

9.0.28

3 months ago

0.0.0-nightly-20240221-0405.1

3 months ago

0.0.0-nightly-20240220-0405.1

3 months ago

0.0.0-nightly-20240219-0407.1

3 months ago

0.0.0-nightly-20240216-0405.1

3 months ago

0.0.0-nightly-20240215-0406.1

3 months ago

0.0.0-nightly-20240214-0405.1

3 months ago

0.0.0-nightly-20240213-0403.1

3 months ago

0.0.0-nightly-20240212-0406.1

3 months ago

0.0.0-nightly-20240209-0405.1

3 months ago

0.0.0-nightly-20240208-0405.1

3 months ago

9.0.27

4 months ago

0.0.0-nightly-20240207-0406.1

3 months ago

0.0.0-nightly-20240206-0405.1

4 months ago

0.0.0-nightly-20240205-0406.1

4 months ago

0.0.0-nightly-20240202-0405.1

4 months ago

0.0.0-nightly-20240201-0407.1

4 months ago

9.0.26

4 months ago

9.0.25

4 months ago

0.0.0-nightly-20240131-0406.1

4 months ago

0.0.0-nightly-20240129-0407.1

4 months ago

0.0.0-nightly-20240126-0405.1

4 months ago

9.0.24

4 months ago

0.0.0-nightly-20240125-0407.1

4 months ago

0.0.0-nightly-20240124-0406.1

4 months ago

9.0.23

4 months ago

0.0.0-nightly-20240123-0405.1

4 months ago

0.0.0-nightly-20240122-0406.1

4 months ago

0.0.0-nightly-20240119-0406.1

4 months ago

9.0.22

4 months ago

0.0.0-nightly-20240118-0405.1

4 months ago

9.0.21

4 months ago

0.0.0-nightly-20240117-0405.1

4 months ago

9.0.20

4 months ago

0.0.0-nightly-20240115-0407.1

4 months ago

0.0.0-nightly-20240116-0406.1

4 months ago

0.0.0-nightly-20240111-0405.1

4 months ago

9.0.19

4 months ago

0.0.0-nightly-20240112-0405.1

4 months ago

0.0.0-nightly-20240110-0406.1

4 months ago

9.0.18

4 months ago

0.0.0-nightly-20240109-0405.1

4 months ago

9.0.17

4 months ago

0.0.0-nightly-20240108-0406.1

4 months ago

0.0.0-nightly-20240105-0405.1

5 months ago

0.0.0-nightly-20240104-0405.1

5 months ago

0.0.0-nightly-20240103-0406.1

5 months ago

9.0.16

5 months ago

0.0.0-nightly-20240101-0406.1

5 months ago

0.0.0-nightly-20231229-0405.1

5 months ago

0.0.0-nightly-20231228-0406.1

5 months ago

0.0.0-nightly-20231226-0405.1

5 months ago

0.0.0-nightly-20231227-0406.1

5 months ago

0.0.0-nightly-20231225-0406.1

5 months ago

0.0.0-nightly-20231222-0405.1

5 months ago

0.0.0-nightly-20231221-0406.1

5 months ago

0.0.0-nightly-20231220-0405.1

5 months ago

0.0.0-nightly-20231219-0407.1

5 months ago

9.0.15

5 months ago

9.0.14

5 months ago

0.0.0-nightly-20231218-0406.1

5 months ago

0.0.0-nightly-20231215-0405.1

5 months ago

9.0.13

5 months ago

0.0.0-nightly-20231214-0405.1

5 months ago

0.0.0-nightly-20231213-0405.1

5 months ago

0.0.0-nightly-20231211-0406.1

5 months ago

0.0.0-nightly-20231212-0405.1

5 months ago

0.0.0-nightly-20231208-0405.1

6 months ago

0.0.0-nightly-20231207-0407.1

6 months ago

0.0.0-nightly-20231206-0406.1

6 months ago

0.0.0-nightly-20231205-0406.1

6 months ago

0.0.0-nightly-20231204-0407.1

6 months ago

0.0.0-nightly-20231201-0406.1

6 months ago

9.0.12

6 months ago

0.0.0-nightly-20231130-0405.1

6 months ago

0.0.0-nightly-20231129-0405.1

6 months ago

0.0.0-nightly-20231127-0407.1

6 months ago

0.0.0-nightly-20231124-0406.1

6 months ago

0.0.0-nightly-20231123-0406.1

6 months ago

0.0.0-nightly-20231122-0406.1

6 months ago

0.0.0-nightly-20231121-0406.1

6 months ago

9.0.11

6 months ago

0.0.0-nightly-20231120-0407.1

6 months ago

0.0.0-nightly-20231117-0406.1

6 months ago

0.0.0-nightly-20231116-0411.1

6 months ago

0.0.0-nightly-20231115-0405.1

6 months ago

9.0.10

6 months ago

0.0.0-nightly-20231114-0405.1

6 months ago

0.0.0-nightly-20231113-0406.1

6 months ago

0.0.0-nightly-20231110-0405.1

6 months ago

9.0.9

6 months ago

0.0.0-nightly-20231109-0405.1

6 months ago

0.0.0-nightly-20231108-0405.1

7 months ago

0.0.0-nightly-20231107-0406.1

7 months ago

0.0.0-nightly-20231106-0406.1

7 months ago

0.0.0-nightly-20231103-0406.1

7 months ago

0.0.0-nightly-20231102-0406.1

7 months ago

0.0.0-nightly-20231101-1848.1

7 months ago

9.0.8

7 months ago

0.0.0-nightly-20231101-0406.1

7 months ago

0.0.0-nightly-20231031-0414.1

7 months ago

0.0.0-nightly-20231030-0406.1

7 months ago

9.0.7

7 months ago

0.0.0-nightly-20231028-2304.1

7 months ago

0.0.0-nightly-20231028-0053.1

7 months ago

0.0.0-nightly-20231027-0413.1

7 months ago

0.0.0-nightly-20231026-0414.1

7 months ago

0.0.0-nightly-20231025-0415.1

7 months ago

0.0.0-nightly-20231024-0413.1

7 months ago

9.0.6

7 months ago

0.0.0-nightly-20231023-0416.1

7 months ago

0.0.0-nightly-20231020-0415.1

7 months ago

0.0.0-nightly-20231019-0416.1

7 months ago

9.0.5

7 months ago

0.0.0-nightly-20231018-0416.1

7 months ago

0.0.0-nightly-20231017-0415.1

7 months ago

0.0.0-nightly-20231016-0417.1

7 months ago

0.0.0-nightly-20231013-0415.1

7 months ago

9.0.4

7 months ago

0.0.0-nightly-20231012-0415.1

7 months ago

9.0.3

7 months ago

0.0.0-nightly-20231011-0416.1

7 months ago

0.0.0-nightly-20231010-0415.1

7 months ago

9.0.2

8 months ago

0.0.0-nightly-20231009-0416.1

8 months ago

0.0.0-nightly-20231006-0415.1

8 months ago

9.0.1

8 months ago

0.0.0-nightly-20231005-0415.1

8 months ago

9.0.0

8 months ago

0.0.0-nightly-20231004-0414.1

8 months ago