Badge

Storybook Source

Compact marker for status, metadata, or short labels.

Usage

Do

  • To flag and draw awareness to a specific element or feature of focus. For example, something is unique about that separates it from other like content.
  • As a notification system with minimal footprint.

Don’t

  • To indicate that interaction by the user is required.

Best Practices

  • While the color variant used should not be the sole indicator of information, choose color patterns that users can quickly scan and identify its intention.
  • Avoid long values, favoring a brief scannable word.

Accessibility

  • Since a Badge may often reflect a value within an implied label, ensure a label is announced. For example, via aria-label or aria-labeledby.

Kind

Label

Count

Type

Type Kind: Label Kind: Count Usage
Default Label 1 Default general purpose callout when no implicit semantic meaning applies.
Info Label 2 Used to convey general information that isn't critical or requires action on the user's part.
Positive Label 3 Accompanying a successful or otherwise positive action or message
Warning Label 4 When a users attention is needed, or action may be required.
Critical Label 5 To communicate conditions deemed critical, negative, or dangerous. For example, sensitive state (e.g. recording), must be resolved, or something has failed.
Bulletin Label 6 Used to provide temporary feedback to specific items in the interface, like live activity, notifications, and unread counts.
Ai Label N/A To call out Dialpad Ai features.

Outlined

Subtle

At the moment, only the bulletin type has a subtle variant.

Icon

Decorative

Decorative badges label and classify items for quick recognition.

Do

  • Use for categories of items with a limited number of options (eg. call categories, AI moments).

Don’t

  • Use for categories of items with an unlimited or unknown number of options (eg. user-defined contact labels, RTA cards, contact centers).
  • Use for single items that are not part of a larger group.
  • Use for decoration only, to bring attention to part of the UI by using colors.
  • Use with kind=count, nor with any type that is not default.
  • Use in combination with an icon.
  • Change the customize the Badge's background color text style,
  • Extend the decorative slot color beyond what Dialtone provides.

Best Practices

  • Favor lighter shades over darker ones.
  • Use each color hue before using the next available shade.

Examples

Label

Count

Vue API 

import { DtBadge } from '@dialpad/dialtone-vue';

Slots

Name
Type
default

Slot for badge content, defaults to text prop

endIcon

Slot for end icon, icon-size slot prop defaults to '200'

startIcon

Slot for start icon, icon-size slot prop defaults to '200'

leftIcon Deprecated

Use startIcon

rightIcon Deprecated

Use endIcon

Props

Name
Default
Type
decoration
"black-400" | "black-500" | "black-900" | "red-200" | "red-300" | "red-400" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "blue-200" | "blue-300" | "blue-400" | "green-300" | "green-400" | "green-500" | "gold-300" | "gold-400" | "gold-500" | "magenta-200" | "magenta-300" | "magenta-400"

Decoration for the badge. This can be only used with kind: label and type: default with no left and right icons

endIconClass
''
string|array|object

Used to customize the end icon container

iconSize
200
"100" | "200" | "300" | "400" | "500" | "600" | "700" | "800"

The size of the left and right icons.

kind
'label'
"label" | "count"

The kind of badge which determines the styling

labelClass
''
string|array|object

Used to customize the label container

outlined
false
boolean

Outlines the badge with a border

startIconClass
''
string|array|object

Used to customize the start icon container

subtle
false
boolean

Shows a subtle appearance for the badge Currently only affects the badge when type is bulletin.

text
''
string

Text for the badge content

type
'default'
"default" | "info" | "positive" | "warning" | "critical" | "bulletin" | "ai"

Color for the badge background

Classes

Class
Applies to
Description

Badge documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope