Badge

import { Badge } from '@tidbcloud/uikit'

import { Badge } from '@tidbcloud/uikit'
 
function Demo() {
  return <Badge>Badge</Badge>
}

import { Badge, Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group>
      <Badge variant="filled">Filled</Badge>
      <Badge variant="light">Light</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="dot">Dot</Badge>
    </Group>
  )
}

import { Badge } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Badge size="xl" variant="gradient" gradient={{ from: 'cyan', to: 'blue', deg: 90 }}>
      Gradient badge
    </Badge>
  )
}

import { Badge, Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group>
      <Badge size="xs" circle>
        1
      </Badge>
      <Badge size="sm" circle>
        7
      </Badge>
      <Badge size="md" circle>
        9
      </Badge>
      <Badge size="lg" circle>
        3
      </Badge>
    </Group>
  )
}

import { Badge, Group } from '@tidbcloud/uikit'
import { IconAt } from '@tabler/icons-react'
 
function Demo() {
  const icon = <IconAt size={12} />
  return (
    <Group>
      <Badge leftSection={icon}>With left section</Badge>
      <Badge rightSection={icon}>With right section</Badge>
    </Group>
  )
}

import { Badge } from '@tidbcloud/uikit'
 
function Demo() {
  return <Badge fullWidth>Full width badge</Badge>
}