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
neutralinfosuccesswarningdanger
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
neutral10info10success10warning10danger10
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
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
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
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-label or aria-labelledby.
bp-tag
Properties
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
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' | determine the visual status state |
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
Slots
| Name | Types | Description |
|---|
default | | badge content |