Tags

npm1.8.3

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'`
`pressed`	`boolean`
`expanded`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`
`value`	`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'`
`pressed`	`boolean`
`expanded`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`
`value`	`string`

CSS Properties

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

Slots

Name	Types	Description
`default`		badge content