Button

常用操作按钮

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

何时使用

标记一组操作命令，响应用户的点击行为，触发相应的业务逻辑。在 Kube Design 中提供了四种按钮。

主按钮：用于主行动点，一个操作区域只能有一个主按钮。
默认按钮：用于没有主次之分点一组行动点。
文本按钮：用于最次级的行动点。
链接按钮：一般用于链接，即导航至某位置。

代码演示

按钮类型

可以设置 Variant 来改变 button 的视觉效果。您可以设置值为 filled，text，outline, 或者 link。若不设置则默认为 filled。

<Group spacing="xl">
  <Button variant="filled" color="secondary">
    KubeSphere
  </Button>
  <Button variant="outline" color="default" radius="xl">
    KubeSphere
  </Button>
  <Button variant="text" radius="xl">
    KubeSphere
  </Button>
  <Button variant="link" color="default">
    KubeSphere
  </Button>
</Group>

1
<Group spacing="xl">
2
  <Button variant="filled" color="secondary">
3
    KubeSphere
4
  </Button>
5
  <Button variant="outline" color="default" radius="xl">
6
    KubeSphere
7
  </Button>
8
  <Button variant="text" radius="xl">
9
    KubeSphere
10
  </Button>
11
  <Button variant="link" color="default">
12
    KubeSphere
13
  </Button>
14
</Group>
15

按钮颜色

通过 color 设置按钮的颜色，默认有六种按钮颜色，default，primary, secondary, success，error，warning。若不设置则默认为 default.

<Group spacing="xl">
  <Button variant="filled" color="default">
    KubeSphere
  </Button>
  <Button variant="filled" color="primary">
    KubeSphere
  </Button>
  <Button variant="filled" color="secondary">
    KubeSphere
  </Button>
  <Button variant="filled" color="success">
    KubeSphere
  </Button>
  <Button variant="filled" color="warning">
      KubeSphere
    </Button>
  <Button variant="filled" color="error">
    KubeSphere
  </Button>
</Group>

1
<Group spacing="xl">
2
  <Button variant="filled" color="default">
3
    KubeSphere
4
  </Button>
5
  <Button variant="filled" color="primary">
6
    KubeSphere
7
  </Button>
8
  <Button variant="filled" color="secondary">
9
    KubeSphere
10
  </Button>
11
  <Button variant="filled" color="success">
12
    KubeSphere
13
  </Button>
14
  <Button variant="filled" color="warning">
15
      KubeSphere
16
    </Button>
17
  <Button variant="filled" color="error">
18
    KubeSphere
19
  </Button>
20
</Group>
21

不可用状态

添加 disabled 属性即可让按钮处于不可用状态

<Group spacing="xl">
  <Button disabled>
    KubeSphere
  </Button>
</Group>

1
<Group spacing="xl">
2
  <Button disabled>
3
    KubeSphere
4
  </Button>
5
</Group>
6

Block 按钮

block 属性将使按钮适合其父宽度。

<Group>
  <Button variant="filled" color="primary" block>KubeSphere</Button>
  <Button variant="outline" color="default" block>KubeSphere</Button>
</Group>

1
<Group>
2
  <Button variant="filled" color="primary" block>KubeSphere</Button>
3
  <Button variant="outline" color="default" block>KubeSphere</Button>
4
</Group>
5

shadow 阴影

shadow 属性将使按钮有阴影效果。

<Group>
  <Button variant="filled" color="primary" shadow>KubeSphere</Button>
  <Button variant="outline" color="secondary" shadow>KubeSphere</Button>
  <Button variant="outline" color="success" shadow>KubeSphere</Button>
  <Button variant="outline" color="warning" shadow>KubeSphere</Button>
</Group>

1
<Group>
2
  <Button variant="filled" color="primary" shadow>KubeSphere</Button>
3
  <Button variant="outline" color="secondary" shadow>KubeSphere</Button>
4
  <Button variant="outline" color="success" shadow>KubeSphere</Button>
5
  <Button variant="outline" color="warning" shadow>KubeSphere</Button>
6
</Group>
7

按钮尺寸

可以使用 size 和 radius 属性可以改变按钮的大小以及圆角。你可以设置值为 xs，sm，md，lg，xl.

<Group spacing="xl">
  <Button variant="filled" color="default" radius="sm" size="sm">
    KubeSphere
  </Button>
  <Button variant="filled" color="success" radius="md" size="md">
    KubeSphere
  </Button>
  <Button variant="filled" color="error" radius="lg" size="sm">
    KubeSphere
  </Button>
  <Button variant="filled" color="warning" radius="xl" size="lg">
    KubeSphere
  </Button>
</Group>

1
<Group spacing="xl">
2
  <Button variant="filled" color="default" radius="sm" size="sm">
3
    KubeSphere
4
  </Button>
5
  <Button variant="filled" color="success" radius="md" size="md">
6
    KubeSphere
7
  </Button>
8
  <Button variant="filled" color="error" radius="lg" size="sm">
9
    KubeSphere
10
  </Button>
11
  <Button variant="filled" color="warning" radius="xl" size="lg">
12
    KubeSphere
13
  </Button>
14
</Group>
15

Loading 状态

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

<Group spacing="xl">
  <Button variant="filled" color="primary" size="md" loading>
    KubeSphere
  </Button>
  <Button variant="filled" color="primary" size="lg" loading>
    KubeSphere
  </Button>
</Group>

1
<Group spacing="xl">
2
  <Button variant="filled" color="primary" size="md" loading>
3
    KubeSphere
4
  </Button>
5
  <Button variant="filled" color="primary" size="lg" loading>
6
    KubeSphere
7
  </Button>
8
</Group>
9

图标按钮

当需要在 button 内嵌入 Icon 时，可以设置 leftIcon 或者 rightIcon 属性，或者直接包裹 Icon 组件。

() => {
  const { Add } = KubeIcon;
  return (
    <Group spacing="xl">
      <Button variant="filled" radius="xl" leftIcon={<Add size={16}/> }>KubeSphere</Button>
      <Button variant="filled" radius="xl">{<Add />}</Button>
      <Button variant="filled" radius="xl" color="success">{<Add />}</Button>
      <Button variant="filled" radius="xl" color="success" rightIcon={<Add size={16}/> }>KubeSphere</Button>
    </Group>
  )
}

1
() => {
2
  const { Add } = KubeIcon;
3
  return (
4
    <Group spacing="xl">
5
      <Button variant="filled" radius="xl" leftIcon={<Add size={16}/> }>KubeSphere</Button>
6
      <Button variant="filled" radius="xl">{<Add />}</Button>
7
      <Button variant="filled" radius="xl" color="success">{<Add />}</Button>
8
      <Button variant="filled" radius="xl" color="success" rightIcon={<Add size={16}/> }>KubeSphere</Button>
9
    </Group>
10
  )
11
}
12

as属性

as 属性可以改变组件所使用的标签或基于的组件。

<Group>
  <Button as="a" href="/login">KubeSphere</Button>
</Group>

1
<Group>
2
  <Button as="a" href="/login">KubeSphere</Button>
3
</Group>
4

布局

常规

信息录入

数据展示

反馈