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 badge component is used to display a small amount of information, such as a count or status, in a compact and visually distinct way. It is often used to display notifications or unread messages.

Example

code
<script type="module">
  import '@blueprintui/components/include/badge.js';
</script>

<div bp-layout="inline gap:xs">
  <bp-badge></bp-badge>
  <bp-badge status="accent"></bp-badge>
  <bp-badge status="success"></bp-badge>
  <bp-badge status="warning"></bp-badge>
  <bp-badge status="danger"></bp-badge>
</div>

Number

1010101010
code
<script type="module">
  import '@blueprintui/components/include/badge.js';
</script>

<div bp-layout="inline gap:xs">
  <bp-badge>10</bp-badge>
  <bp-badge status="accent">10</bp-badge>
  <bp-badge status="success">10</bp-badge>
  <bp-badge status="warning">10</bp-badge>
  <bp-badge status="danger">10</bp-badge>
</div>

Long Form

0.0.00.0.00.0.00.0.00.0.0
code
<script type="module">
  import '@blueprintui/components/include/badge.js';
</script>

<div bp-layout="inline gap:xs">
  <bp-badge>0.0.0</bp-badge>
  <bp-badge status="accent">0.0.0</bp-badge>
  <bp-badge status="success">0.0.0</bp-badge>
  <bp-badge status="warning">0.0.0</bp-badge>
  <bp-badge status="danger">0.0.0</bp-badge>
</div>

Install

NPM

// npm package
import '@blueprintui/components/include/badge.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/badge.js/+esm';
</script>

Accessibility

  • Use a clear, descriptive supporting text or aria-label for the badge to communicates the information it is displaying.
  • Use the appropriate badge status to indicate the severity.
  • Avoid using the title attribute, as it is not read by screen readers.

bp-badge

Properties

NameTypesDescription
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state

Attributes

NameTypesDescription
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state

CSS Properties

NameTypesDescription
--background
--color
--font-size
--width
--height
--min-width
--min-height
--border-radius
--padding

Slots

NameTypesDescription
defaultbadge content