@fluentui/react-tags
TypeScript icon, indicating that this package has built-in type declarations

9.2.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @fluentui/react-tags

Weekly Downloads

73,958

Version

9.2.1

License

MIT

Unpacked Size

448 kB

Total Files

177

Last publish

Collaborators

  • sopranopillow
  • microsoft1es
  • justslone
  • chrisdholt
  • miroslavstastny
  • levithomason
  • uifabricteam
  • uifrnbot
  • dzearing
  • layershifter
  • ling1726
  • travisspomer