Tag

Tag component is used for items that need to be labeled, categorized, or organized using keywords that describe them.

Import#

Rock UI exports 5 Tag related components:

  • Tag: The wrapper for all the tag elements
  • TagLabel: The label for tag's text content.
  • TagLeftIcon: The icon placed on the left side of the tag
  • TagRightIcon: The icon placed on the right side of the tag
  • TagCloseButton: The close button for the tag.

Usage#

Sample Tag
Editable Example
BlueBlueBlue
Editable Example

With left icon#

TealTealTeal
Editable Example

With right icon#

PurplePurplePurple
Editable Example

With close button#

GreenGreenGreen
Editable Example

With custom element#

SA
Segun
Editable Example

Props#

NameTypeDefaultDescription
variantsolid, subtle, outlinesolidThe variant style of the tag component.
sizesm, md, lgmdThe size of the tag component.
colorSchemestringThe color scheme of the tag variant.
Edit this page

Made byChakraandRock Content