Preview
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-labeloraria-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 anytypethat is notdefault. - 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';