lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

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

infoinfo
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>
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

NameTypesDescription
accessordetermine the visual status state
status'accent' | 'success' | 'warning' | 'danger'
pressedboolean
selectedboolean
expandedboolean
readonlyboolean
disabledboolean
type'button' | 'submit'
namestringrepresents the name of the current
element as a string.
valuestring
popoverTargetElementHTMLElement
popoverTargetAction| 'toggle' | 'show' | 'hide'
popovertargetstring
formHTMLFormElement
formActionstring
formEnctypestring
formMethodstring
formNoValidateboolean
formTargetstring
labelsNodeListOf
validationMessagestring
validityValidityState
willValidateboolean
checkValidityany
reportValidityany
setCustomValidityany
formAssociatedboolean

Attributes

NameTypesDescription
accessordetermine the visual status state
popovertargetactiondetermines the current value
popovertargetdetermines the current value

CSS Properties

NameTypesDescription
--background
--color
--border
--padding
--font-size
--border-radius
--line-height

Slots

NameTypesDescription
defaultbadge content