Variants
Example of Tags - default
<BcTag>Read-only tag</BcTag>
React documentation
Last modified:
BcTag Props
| Prop | Type | Required? | Default | Purpose |
|---|---|---|---|---|
isRemovable | boolean | required | false | Used to display the remove icon when set to true. |
isDisabled | boolean | required | false | Used to disable the tag when set to true. |
onRemove | function | required | Fired 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.
HTML
Last modified:
- Use
.bc-tagwhen marking up a single, stand-alone tag - Use sorted or unsorted lists when grouping tags, applying the
.bc-tagsclass to the list wrapper
Add a button to remove a tag:
- Nest the
<button>with the.bc-btn.bc-btn--crossclasses inside.bc-tag, after the<span>. - Remember to nest the
<span>Remove</span>inside the<button>. This is required to visually position thexicon.
Design
Last modified:
Use tags to add taxonomical data to Submissions and Targets.
Accessibility
Last modified:
Tags offer no semantics by themselves, so they must be nested in other semantic markup.
See the HTML guidance.
Rationale
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: