Badge Component

Introduction

The Badge Component is a versatile UI element in the CXTMS system used to display short, important pieces of information. It's commonly used to highlight status, counts, or labels within the interface.

YAML Structure

The Badge Component is defined in YAML as follows:

component: badge
props:
  value: string
  onClick: [] # optional; array of actions to dispatch on click
  options:
    pill: boolean
    bg: string
    text: string

Attribute Description

Attribute	Type	Description	Required
value	string	The text to display in the badge	Yes
onClick	action[]	Actions to dispatch when the badge is clicked. When defined, the badge becomes interactive (pointer cursor). When omitted, the badge is non-interactive.	No
options.pill	boolean	If true, the badge will have rounded corners	No
options.bg	string	The background color of the badge	No
options.text	string	The text color of the badge	No

Background Color Options

• primary
• secondary
• success
• danger
• warning
• info
• light
• dark

Text Color Options

• primary
• secondary
• success
• danger
• warning
• info
• light
• dark

Examples

Basic Badge

component: badge
props:
  value: "New"

Pill Badge with Custom Colors

component: badge
props:
  value: "Urgent"
  options:
    pill: true
    bg: "danger"
    text: "white"

Status Badge

component: badge
props:
  value: "{{ shipmentStatus }}"
  options:
    bg: "{{ eval shipmentStatus === 'Delivered' ? 'success' : 'warning' }}"
    text: "dark"

Clickable Badge Opening a Dialog

component: badge
props:
  value: "{{ shipmentStatus }}"
  onClick:
    - dialog:
        name: "shipmentStatusHistory"
        props:
          shipmentId: "{{ shipmentId }}"
  options:
    bg: "{{ eval shipmentStatus === 'Delivered' ? 'success' : 'warning' }}"
    text: "dark"

When onClick is defined the badge receives a pointer cursor and stops click event propagation so it can be safely embedded inside other clickable elements (e.g. a card or table row).

Best Practices

1. Keep badge text concise: Use short, clear text that can be quickly read and understood.
2. Use consistent colors: Establish a color scheme for different types of badges and stick to it throughout your application.
3. Ensure contrast: Make sure the text color contrasts well with the background color for readability.
4. Use badges sparingly: Overuse of badges can clutter the interface and reduce their impact.
5. Consider accessibility: Ensure that the information conveyed by badges is also available to screen readers.