The tag component is used to display labels or categories of information. It can be used to group and categorize similar items, or to label content with a certain type or status.
Example
Displays labeled, removable tags for categorization or filtering.
code
<script type="module">
import '@blueprintui/components/include/tag.js';
import '@blueprintui/components/include/badge.js';
</script>
<div bp-layout="inline gap:xs">
<bp-tag>neutral</bp-tag>
<bp-tag status="accent">info</bp-tag>
<bp-tag status="success">success</bp-tag>
<bp-tag status="warning">warning</bp-tag>
<bp-tag status="danger">danger</bp-tag>
</div>Badges
Shows tags with badges for additional context.
code
<script type="module">
import '@blueprintui/components/include/tag.js';
import '@blueprintui/components/include/badge.js';
</script>
<div bp-layout="inline gap:xs">
<bp-tag>neutral <bp-badge>10</bp-badge></bp-tag>
<bp-tag status="accent">info <bp-badge status="accent">10</bp-badge></bp-tag>
<bp-tag status="success">success <bp-badge status="success">10</bp-badge></bp-tag>
<bp-tag status="warning">warning <bp-badge status="warning">10</bp-badge></bp-tag>
<bp-tag status="danger">danger <bp-badge status="danger">10</bp-badge></bp-tag>
</div>Readonly
Demonstrates tags in readonly state.
code
<script type="module">
import '@blueprintui/components/include/tag.js';
</script>
<div bp-layout="inline gap:xs">
<bp-tag readonly status="accent">info</bp-tag>
<bp-tag status="accent">info</bp-tag>
</div>Links
Shows tags as clickable links for navigation.
code
<script type="module">
import '@blueprintui/components/include/tag.js';
import '@blueprintui/components/include/badge.js';
</script>
<div bp-layout="inline gap:xs">
<a href="#"
><bp-tag>neutral <bp-badge>10</bp-badge></bp-tag></a
>
<a href="#"
><bp-tag status="accent">info <bp-badge status="accent">10</bp-badge></bp-tag></a
>
<a href="#"
><bp-tag status="success">success <bp-badge status="success">10</bp-badge></bp-tag></a
>
<a href="#"
><bp-tag status="warning">warning <bp-badge status="warning">10</bp-badge></bp-tag></a
>
<a href="#"
><bp-tag status="danger">danger <bp-badge status="danger">10</bp-badge></bp-tag></a
>
</div>Install
NPM
// npm package
import '@blueprintui/components/include/tag.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/tag.js/+esm';
</script>Accessibility
- The Tag component should have a descriptive
aria-labeloraria-labelledby.
bp-tag
Properties
| Name | Types | Description |
|---|---|---|
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type affecting color and semantic meaning |
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current |
value | string | determines the current value |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popoverTargetAction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
form | HTMLFormElement | |
formAction | string | |
formEnctype | string | |
formMethod | string | |
formNoValidate | boolean | |
formTarget | string | |
labels | NodeListOf | |
validationMessage | string | |
validity | ValidityState | |
willValidate | boolean | |
checkValidity | any | |
reportValidity | any | |
setCustomValidity | any | |
formAssociated | boolean |
Attributes
| Name | Types | Description |
|---|---|---|
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type affecting color and semantic meaning |
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current element as a string. |
value | string | determines the current value |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popovertargetaction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background | ||
--color | ||
--border | ||
--padding | ||
--font-size | ||
--border-radius | ||
--line-height |
Slots
| Name | Types | Description |
|---|---|---|
default | badge content |