StatusDot

Status Dot

Import: import { StatusDot } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

Status dot, which indicates the status of the task.

() => (
  <Group>
    <StatusDot color="success">Ready</StatusDot>
    <StatusDot color="warning">Warning</StatusDot>
    <Tooltip content="Warning tips">
      <StatusDot color="error" />
    </Tooltip>
  </Group>
)

1
() => (
2
  <Group>
3
    <StatusDot color="success">Ready</StatusDot>
4
    <StatusDot color="warning">Warning</StatusDot>
5
    <Tooltip content="Warning tips">
6
      <StatusDot color="error" />
7
    </Tooltip>
8
  </Group>
9
)

Colors

Set color of Status Dot.

() => (
  <Group>
    <StatusDot />
    <StatusDot color="warning" />
    <StatusDot color="success" />
    <StatusDot color="error" />
  </Group>
)

1
() => (
2
  <Group>
3
    <StatusDot />
4
    <StatusDot color="warning" />
5
    <StatusDot color="success" />
6
    <StatusDot color="error" />
7
  </Group>
8
)

motion

() => (
  <Group spacing={30}>
    <StatusDot motion />
    <StatusDot motion color="warning" />
    <StatusDot motion color="success">
      starting
    </StatusDot>
    <StatusDot motion color="error">
      restarting
    </StatusDot>
  </Group>
)

1
() => (
2
  <Group spacing={30}>
3
    <StatusDot motion />
4
    <StatusDot motion color="warning" />
5
    <StatusDot motion color="success">
6
      starting
7
    </StatusDot>
8
    <StatusDot motion color="error">
9
      restarting
10
    </StatusDot>
11
  </Group>
12
)