Badge 徽章组件 #

import { Badge } from '@chakra-ui/react'

function Example() {
  return <Badge>默认徽章</Badge>
}

<Badge>默认</Badge>
<Badge variant="subtle">柔和</Badge>
<Badge variant="solid">实心</Badge>
<Badge variant="outline">轮廓</Badge>

<Badge colorScheme="green">成功</Badge>
<Badge colorScheme="red">错误</Badge>
<Badge colorScheme="yellow">警告</Badge>
<Badge colorScheme="blue">信息</Badge>
<Badge colorScheme="purple">紫色</Badge>
<Badge colorScheme="gray">灰色</Badge>

<Badge fontSize="xs">超小</Badge>
<Badge fontSize="sm">小</Badge>
<Badge fontSize="md">中等</Badge>

function StatusBadge({ status }) {
  const statusConfig = {
    active: { color: 'green', text: '活跃' },
    inactive: { color: 'gray', text: '未激活' },
    pending: { color: 'yellow', text: '待审核' },
    blocked: { color: 'red', text: '已禁用' },
  }

  const config = statusConfig[status]

  return (
    <Badge colorScheme={config.color} variant="subtle">
      {config.text}
    </Badge>
  )
}

function NotificationBadge({ count }) {
  return (
    <Box position="relative">
      <BellIcon boxSize={6} />
      {count > 0 && (
        <Badge
          position="absolute"
          top="-8px"
          right="-8px"
          colorScheme="red"
          borderRadius="full"
          minW="18px"
          textAlign="center"
        >
          {count > 99 ? '99+' : count}
        </Badge>
      )}
    </Box>
  )
}

function TagList({ tags }) {
  return (
    <HStack spacing={2}>
      {tags.map((tag) => (
        <Badge key={tag} colorScheme="blue" variant="outline">
          {tag}
        </Badge>
      ))}
    </HStack>
  )
}