Function badge

  • badge(props): Element

  • Creates a badge component for displaying a label with an optional icon.

    Parameters

    • props: BadgeBlockProps

      Configuration object for the badge component

    Returns Element

    A JSX element representing the badge component

    Example

    Basic usage with default checkmark icon

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

    Example

    Usage with custom icon and dynamic label

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

    Example

    Usage with custom colors

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

    Example

    Usage with dynamic colors based on state

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

    Example

    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'
    });

    Example

    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
    });

    Example

    Usage with custom styling

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

Settings