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. The tag component should contain text that is short, concise, and relevant to the content it labels. Avoid using overly long text or irrelevant information.

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