Button

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.

Colors

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

Disabled

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

Block Button

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

Shadow Button

Shadow property will make the button have a shadow effect.

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.

Loading

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

With Icon

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

As

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