Badge

Import

import { Badge } from '@dangbt/pro-ui'

Variants

<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Inactive</Badge>
<Badge variant="info">Draft</Badge>

Common usage — status column in ProTable

const columns = [
  {
    title: 'Status',
    dataIndex: 'status',
    render: (v: string) => (
      <Badge variant={v === 'active' ? 'success' : 'danger'}>{v}</Badge>
    ),
  },
]

Props

Prop	Type	Default	Description
variant	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	'default'	Color variant
children	ReactNode	✅	Badge content