Badge Component

Introduction

The Badge Component is a versatile UI element in the CargoXplorer TMS 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
  options:
    pill: boolean
    bg: string
    text: string

Attribute Description

Attribute	Type	Description	Required
value	string	The text to display in the badge	Yes
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"

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.