Tag

Storybook

Tag for categorizing or markup.

Import

import { Tag, TagGroup } from 'rsuite';
  • <Tag>
  • <TagGroup>

Examples

Basic

Text
Closable

Size

Large
Medium
Small

Colorful Tags

Red
Orange
Yellow
Green
Cyan
Blue
Violet

Dynamically tagging

javascript
css
react

Props

<Tag>

Property Type (Default) Description
as ElementType ('div') You can use a custom element type for this component
children * ReactNode The content of the component.
classPrefix string ('tag') The prefix of the component CSS class
closable boolean
onClose (event) => void Click the callback function for the Close button
size 'sm' | 'md' | 'lg' ('md') Set the tag size

<TagGroup>

Property Type (Default) Description
as ElementType ('div') You can use a custom element type for this component
children * ReactNode The content of the component.
classPrefix string ('tag-group') The prefix of the component CSS class
Vercel banner