Avatar

import { Avatar } from '@tidbcloud/uikit'

import { Avatar } from '@tidbcloud/uikit'
import { IconStar } from '@tabler/icons-react'
 
function Demo() {
  return (
    <>
      {/* With image */}
      <Avatar src="avatar.png" alt="it's me" />
 
      {/* Default placeholder */}
      <Avatar radius="xl" />
 
      {/* Letters with xl radius */}
      <Avatar color="cyan" radius="xl">
        MK
      </Avatar>
 
      {/* Custom placeholder icon */}
      <Avatar color="blue" radius="sm">
        <IconStar size={20} />
      </Avatar>
    </>
  )
}

import { Avatar, Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group>
      <Avatar name="John Doe" color="initials" />
      <Avatar name="Jane Smith" color="initials" />
    </Group>
  )
}

import { Avatar } from '@tidbcloud/uikit'
import { IconStar } from '@tabler/icons-react'
 
function Demo() {
  return (
    <>
      {/* Default placeholder */}
      <Avatar src={null} alt="no image here" />
 
      {/* Placeholder with initials */}
      <Avatar src={null} alt="Vitaly Rtishchev" color="red">
        VR
      </Avatar>
 
      {/* Placeholder with custom icon */}
      <Avatar color="blue" radius="xl">
        <IconStar size={20} />
      </Avatar>
    </>
  )
}

import { Avatar } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Avatar.Group>
      <Avatar src="image1.png" />
      <Avatar src="image2.png" />
      <Avatar src="image3.png" />
      <Avatar>+5</Avatar>
    </Avatar.Group>
  )
}