Tags

npm2.0.0

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

neutral

info

success

warning

danger

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

neutral10

info10

success10

warning10

danger10

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

info

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

// 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-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 element as a string.
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popoverTargetAction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`
`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
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popovertargetaction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`

CSS Properties

Name	Types	Description
`--background`
`--color`
`--border`
`--padding`
`--font-size`
`--border-radius`
`--line-height`

Slots

Name	Types	Description
`default`		badge content