import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Badge

The Badge component from Superset's UI library.

Live Example

<StoryWithControls component="Badge" props={{ count: 5, size: "default", showZero: false, overflowCount: 99 }} controls={[ { name: "count", label: "Count", type: "number", description: "Number to show in the badge." }, { name: "size", label: "Size", type: "select", options: [ "default", "small" ], description: "Size of the badge." }, { name: "showZero", label: "Show Zero", type: "boolean", description: "Whether to show badge when count is zero." }, { name: "overflowCount", label: "Overflow Count", type: "number", description: "Max count to show. Shows count+ when exceeded (e.g., 99+)." }, { name: "color", label: "Color", type: "select", options: [ "pink", "red", "yellow", "orange", "cyan", "green", "blue", "purple", "geekblue", "magenta", "volcano", "gold", "lime" ], description: "Custom background color for the badge." } ]} />

Try It

Edit the code below to experiment with the component:

function Demo() {
  return (
    <Badge
      count={5}
      size="default"
      overflowCount={99}
    />
  );
}

Status Badge

function StatusBadgeDemo() {
  const statuses = ['default', 'success', 'processing', 'warning', 'error'];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {statuses.map(status => (
        <Badge key={status} status={status} text={`Status: ${status}`} />
      ))}
    </div>
  );
}

Color Gallery

function ColorGallery() {
  const colors = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'];
  return (
    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
      {colors.map(color => (
        <Badge key={color} count={9} color={color} />
      ))}
    </div>
  );
}

Props

Import

import { Badge } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::