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.
There are filled button, outline button, text button and link button in kube.
2
<Button variant="filled" color="secondary">
5
<Button variant="outline" color="default" radius="xl">
8
<Button variant="text" radius="xl">
11
<Button variant="link" color="default">
There are six colors of Button.The color property can be set to default, primary, secondary, success, warning and error.
2
<Button variant="filled" color="default">
5
<Button variant="filled" color="primary">
8
<Button variant="filled" color="secondary">
11
<Button variant="filled" color="success">
14
<Button variant="filled" color="warning">
17
<Button variant="filled" color="error">
To mark a button as disabled, add the disabled property to the Button.
Block property will make the button fit to its parent width.
2
<Button variant="filled" color="primary" block>KubeSphere</Button>
3
<Button variant="outline" color="default" block>KubeSphere</Button>
Shadow property will make the button have a shadow effect.
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>
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.
2
<Button variant="filled" color="default" radius="sm" size="sm">
5
<Button variant="filled" color="success" radius="md" size="md">
8
<Button variant="filled" color="error" radius="lg" size="sm">
11
<Button variant="filled" color="warning" radius="xl" size="lg">
A loading indicator can be added to a button by setting the loading property on the Button.
2
<Button variant="filled" color="primary" size="md" loading>
5
<Button variant="filled" color="primary" size="lg" loading>
Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.
2
const { Add } = KubeIcon;
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>
The as attribute can change the label used by the component or the component based on it.
2
<Button as="a" href="/login">KubeSphere</Button>