Last modified:

Styles for taxonomical keywords that fall into single or multiple categories.


Example of Tags - default

<BcTag>Read-only tag</BcTag>

React documentation

Last modified:

BcTag Props

isRemovablebooleanrequiredfalseUsed to display the remove icon when set to true.
isDisabledbooleanrequiredfalseUsed to disable the tag when set to true.
onRemovefunctionrequiredFired when the remove tag button is clicked. It is a required props if isRemovable props is true.

Any extended types: React.HTMLAttributes<HTMLSpanElement> for span.


Last modified:

  • Use .bc-tag when marking up a single, stand-alone tag
  • Use sorted or unsorted lists when grouping tags, applying the .bc-tags class to the list wrapper

Add a button to remove a tag:

  • Nest the <button> with the .bc-btn.bc-btn--cross classes inside .bc-tag, after the <span>.
  • Remember to nest the <span>Remove</span> inside the <button>. This is required to visually position the x icon.


Last modified:

Use tags to add taxonomical data to Submissions and Targets.


Last modified:

Tags offer no semantics by themselves, so they must be nested in other semantic markup.

See the HTML guidance.


Last modified:

‘Tagging’ is a familiar design pattern to users, dating back to early web 2.0 (eg. in blogging and image libraries).

Interactive tags allow users to add and remove taxonomies, whether standalone (eg. using this component) or in advanced select menus — eg. react-select’s MultiValue component.

See also

Last modified: