Badge

Badge图标右上角的圆形徽标数字

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

基础用法

状态提示，单纯的 count 值。

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

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

不同颜色标记

徽标内容可以是文本，也可以是数字，通过设置 color 属性可以设置组件的颜色。

() => (
  <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
)
10

带阴影标记

可以设置 shadow 给徽标增加阴影效果。

() => (
  <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
)
20

布局

常规

信息录入

数据展示

反馈

Badge

基础用法

不同颜色标记

带阴影标记