Badge

Small numerical value or status descriptor for UI elements.

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

Simplest Usage. Badge can be numbers or text.

KubeSphere

() => (
  <Group>
    <Badge>KubeSphere</Badge>
    <Badge color="warning">12</Badge>
  </Group>
)

1
() => (
2
  <Group>
3
    <Badge>KubeSphere</Badge>
4
    <Badge color="warning">12</Badge>
5
  </Group>
6
)

colors

Set color of Badge.

KubeSphere

#12

KubeSphere

() => (
  <Group>
    <Badge color="warning">KubeSphere</Badge>
    <Badge color="error">#12</Badge>
    <Badge color="secondary">KubeSphere</Badge>
    <Badge color="success">KubeSphere</Badge>
    <Badge color="blue">9</Badge>
  </Group>
)

1
() => (
2
  <Group>
3
    <Badge color="warning">KubeSphere</Badge>
4
    <Badge color="error">#12</Badge>
5
    <Badge color="secondary">KubeSphere</Badge>
6
    <Badge color="success">KubeSphere</Badge>
7
    <Badge color="blue">9</Badge>
8
  </Group>
9
)

Shadow

set Shadow of Badge.

KubeSphere

#12

KubeSphere

() => (
  <Group>
    <Badge color="warning" shadow>
      KubeSphere
    </Badge>
    <Badge color="error" shadow>
      #12
    </Badge>
    <Badge color="secondary" shadow>
      KubeSphere
    </Badge>
    <Badge color="success" shadow>
      KubeSphere
    </Badge>
    <Badge color="blue" shadow>
      9
    </Badge>
  </Group>
)

1
() => (
2
  <Group>
3
    <Badge color="warning" shadow>
4
      KubeSphere
5
    </Badge>
6
    <Badge color="error" shadow>
7
      #12
8
    </Badge>
9
    <Badge color="secondary" shadow>
10
      KubeSphere
11
    </Badge>
12
    <Badge color="success" shadow>
13
      KubeSphere
14
    </Badge>
15
    <Badge color="blue" shadow>
16
      9
17
    </Badge>
18
  </Group>
19
)

Layout

General

Data Entry

Data Display

Feedback

Badge

Basic Usage

colors

Shadow