Chip

import { Chip } from '@tidbcloud/uikit'

import { Chip } from '@tidbcloud/uikit'
 
function Demo() {
  return <Chip defaultChecked>Awesome chip</Chip>
}

import { useState } from 'react'
import { Chip } from '@tidbcloud/uikit'
 
function Demo() {
  const [checked, setChecked] = useState(false)
 
  return (
    <Chip checked={checked} onChange={() => setChecked((v) => !v)}>
      My chip
    </Chip>
  )
}

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

import { Chip } from '@tidbcloud/uikit'
import { IconX } from '@tabler/icons-react'
 
function Demo() {
  return (
    <Chip icon={<IconX size={16} />} color="red" variant="filled" defaultChecked>
      Forbidden
    </Chip>
  )
}

import { Chip, Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <Chip.Group>
        <Group>
          <Chip value="1">Single chip</Chip>
          <Chip value="2">Can be selected</Chip>
          <Chip value="3">At a time</Chip>
        </Group>
      </Chip.Group>
 
      <Chip.Group multiple>
        <Group mt="md">
          <Chip value="1">Multiple chips</Chip>
          <Chip value="2">Can be selected</Chip>
          <Chip value="3">At a time</Chip>
        </Group>
      </Chip.Group>
    </>
  )
}

import { useState } from 'react'
import { Chip } from '@tidbcloud/uikit'
 
function Single() {
  const [value, setValue] = useState('react')
 
  return (
    <Chip.Group multiple={false} value={value} onChange={setValue}>
      <Chip value="react">React</Chip>
      <Chip value="ng">Angular</Chip>
      <Chip value="svelte">Svelte</Chip>
    </Chip.Group>
  )
}