Dot

A simple colored dot/circle indicator component.

Import

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

Basic Usage

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

Different Sizes

import { Dot } from '@tidbcloud/uikit/biz'
import { Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group>
      <Dot color="blue" size={4} />
      <Dot color="blue" size={8} />
      <Dot color="blue" size={12} />
      <Dot color="blue" size={16} />
    </Group>
  )
}

With Text

import { Dot } from '@tidbcloud/uikit/biz'
import { Group, Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group gap="xs">
      <Dot color="green" />
      <Text>Online</Text>
    </Group>
  )
}

Props

Prop	Type	Default	Description
`color`	`MantineColor`	-	Theme color for the dot
`size`	`number`	`8`	Dot size in pixels

Dot also accepts all Box component props.

DateTimePicker DotBadge