Bain Logo

Tag

Jump to Props

Highlight an item's status for quick recognition

You can customise the visual styles however you like, which is also the same for designers in Figma. Below are a few examples for inspiration.

Import

Use

ExamplePASSFAILWARNINGNEW

Interactivity

Clicking on a Tag

Pass a function to the Tag's onClick prop. The element will become a button too.

Dismissing a Tag

Pass an onDismiss handler to show the X button. You need to handle the state from the outside.

ISSUE

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
dismissableboolean

Whether or not the tag can be dismissed.

onClickfunction

What to do when the component is clicked.

onDismissfunction

What to do when the component is dismissed.

textstringText

The text to show in the component

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy