Function: badge()

function badge(props: BadgeBlockProps): Element;

Defined in: src/UI/blocks/badge.tsx:136

Badge component for displaying a label with an optional icon.

Parameters

Parameter	Type	Description
props	BadgeBlockProps	Configuration object

Returns

Element

Examples

Basic usage with default checkmark icon

badge({
  name: 'status',
  label: 'Completed'
});

Usage with custom icon and dynamic label

badge({
  name: 'download-status',
  label: ({data}) => data.downloadProgress + '%',
  icon: 'download'
});

Usage with custom colors

badge({
  name: 'priority',
  label: 'High Priority',
  icon: 'warning',
  bgColor: '#ff4444',
  color: '#ffffff'
});

Usage with dynamic colors based on params with data and value

badge({
  name: 'status',
  label: ({data}) => data.taskStatus,
  bgColor: ({data}) => data.taskStatus === 'completed' ? '#22c55e' : '#f59e0b',
  color: '#ffffff'
});

Usage with React node as label and default value

badge({
  name: 'warning',
  label: <span>Custom <strong>formatted</strong> label</span>,
  icon: 'warning',
  defaultValue: 'Initial Warning'
});

Usage with text wrapping enabled

badge({
  name: 'long-text',
  label: 'This is a very long text that might need to wrap to multiple lines',
  wrap: true
});

Usage with custom styling

badge({
  name: 'custom-badge',
  label: 'Styled Badge',
  style: {
    border: '2px solid #007bff',
    borderRadius: '8px',
    fontSize: '14px'
  },
  className: 'custom-badge-class'
});