Button

Used to trigger an operation

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

When To Use

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

In Kube Design we provide 4 types of button.

Primary button: indicate the main action, one primary button at most in one section.

Default button: indicate a series of actions without priority.

Text button: used for the most secondary action.

Link button: used for external links.

Basic Usage

Variant

There are filled button, outline button, text button and link button in kube.

<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

Colors

There are six colors of Button.The color property can be set to default, primary, secondary, success, warning and error.

<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

To mark a button as disabled, add the disabled property to the Button.

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

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

Block Button

Block property will make the button fit to its parent width.

<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 Button

Shadow property will make the button have a shadow effect.

<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 and Radius

Use the size, radius prop to change the size or radius of the button. You can set the value to xs, sm, md, lg or 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

A loading indicator can be added to a button by setting the loading property on the Button.

<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

With Icon

Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.

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

The as attribute can change the label used by the component or the component based on it.

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

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