DotBadge

import { DotBadge } from '@tidbcloud/uikit/biz'

import { DotBadge } from '@tidbcloud/uikit/biz'
import { Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group>
      <DotBadge color="green">Active</DotBadge>
      <DotBadge color="yellow">Pending</DotBadge>
      <DotBadge color="red">Error</DotBadge>
    </Group>
  )
}

import { DotBadge } from '@tidbcloud/uikit/biz'
import { Stack } from '@tidbcloud/uikit'
 
function Demo() {
  const statuses = [
    { status: 'running', color: 'green', label: 'Running' },
    { status: 'stopped', color: 'gray', label: 'Stopped' },
    { status: 'error', color: 'red', label: 'Error' },
    { status: 'warning', color: 'yellow', label: 'Warning' }
  ]
 
  return (
    <Stack>
      {statuses.map((s) => (
        <DotBadge key={s.status} color={s.color}>
          {s.label}
        </DotBadge>
      ))}
    </Stack>
  )
}