@fluentui/react-tags-preview

@fluentui/react-tags-preview

React Tags components for Fluent UI React

These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.

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