Skip to main content
Version: Next

Badge

The Badge component from Superset's UI library.

Live Example​

Loading component...

Try It​

Edit the code below to experiment with the component:

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

Status Badge​

Live Editor
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>
  );
}
Result
Loading...
Live Editor
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>
  );
}
Result
Loading...

Props​

PropTypeDefaultDescription
countnumber5Number to show in the badge.
sizestring"default"Size of the badge.
showZerobooleanfalseWhether to show badge when count is zero.
overflowCountnumber99Max count to show. Shows count+ when exceeded (e.g., 99+).

Import​

import { Badge } from '@superset/components';
Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.