Components

Badge

Used to display a short piece of info that typically represents a status, label, or category.

Usage

The Badge component is utilized to visually represent a status, category, or count with a small, concise label on the page.

Each Badge component is pre-configured with styles based on the default appearance (info) and maxWidth(200px) values.

->
Published
::badge
---
appearance: "info"
truncation-tooltip: false
icon-before: true
max-width: "200px"
---
Published

#icon
->
::
Badge Component Props

Tooltip text that will be displayed on hover.

Whether tooltip should only be shown when the badge is truncated.

A boolean whether or not to show the icon before the badge text (or after).

The max width of the element. Accepts string.

Props

appearance

The Badge component can take one of the following appearance values:

  • Type: 'info' | 'success' | 'warning' | 'danger' | 'decorative' | 'neutral' | 'connect' | 'custom' | 'delete' | 'get' | 'head' | 'options' | 'patch' | 'post' | 'put' | 'trace'
  • Default: 'info'
Passing one of the methods appearances will apply text-transform: uppercase and set the min-width on the badge container. You may pass custom to apply method badge styling should you need a badge for your custom method.

tooltip

Optionally provide a string of tooltip text that will be shown on badge hover.

  • Type: string
  • Default: ''

truncationTooltip

A boolean to conditionally display the tooltip only when the Badge text is truncated.

  • Type: boolean
  • Default: false
Text content that is wider than the provided maxWidth value will be truncated.

iconBefore

The icon slot content is displayed before the badge text by default.

Set the iconBefore prop to false in order to render the icon after the badge text.

  • Type: boolean
  • Default: true

Slots

default

Use the #default slot to add badge content.

icon

By default, the icon slot content is displayed before the badge text.

Icon positioning (whether the slot content is rendered before or after the badge text) can be configured with the iconBefore prop.