Matterway
    Preparing search index...

    Function badge

    • Badge component for displaying a label with an optional icon.

      Parameters

      • props: BadgeBlockProps

        Configuration object

        • name

          Name of the badge in the state

        • label

          Text or React node to display in the badge

        • icon

          Icon to display in the badge. Defaults to 'checkmark'. Available icons: 'add-circle', 'add', 'arrow-back', 'arrow-down', 'arrow-forward', 'arrow-up', 'checkmark-circle-outline', 'checkmark-circle', 'checkmark', 'clipboard', 'close', 'close-circle', 'document', 'download', 'eye', 'folder-open', 'folder', 'gift', 'information-circle-outline', 'information-circle', 'more', 'open', 'remove-circle', 'share', 'thumbs-down', 'thumbs-up', 'trash', 'warning', 'navigate-back', 'copy', 'moon', 'move', 'sunny', 'loading-indicator', 'close-circle-outline', 'play-circle', 'play', 'thumbs-down-tabler', 'thumbs-up-tabler'

        • bgColor

          Background color of the badge. Can be a static string or a function that receives params with data and value, returning a color

        • color

          Text color of the badge. Can be a static string or a function that receives params with data and value, returning a color

        • defaultValue

          Default value to display in the badge

        • wrap

          Whether the text should wrap. Defaults to false. Can be a static boolean or a function that receives params with data and value, returning a boolean

        • style

          Custom CSS styles to apply to the badge

        • className

          Additional CSS classes to apply to the badge

      Returns Element

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

    Settings