Buttons communicate an action to happen on user interaction.

installyarn add @clayui/button
versionNPM Version
useimport Button from '@clayui/button';

Buttons

Buttons communicate an action to happen on user interaction.

Types:

Primary

The primary button is always used for the most important actions. Two primary actions can't be near each other.

Secondary

The secondary button is always use for secondary actions. Several secondary actions can be near by each other.

The link button is mainly used for Cancel actions.

Action buttons

The action-based color button is a primary button that uses alert colors to help people identify certain actions more easily.

Success

Indicates a positive action, such as the addition of an item.

Info

Usually informs the user about a neutral event.

Warning

Indicates an action that can have some side effects and users should be cautious. These actions can be undone by the user if the action was made mistakenly.

Error

Indicates a dangerous action, generally a destructive action. These actions cannot be undone.

Sizes

Default

The default size is a height of 40px. It is used for main page actions such as Save or Cancel.

Small

The small size is a height of 32px. It is used for actions inside a page, such as dropdowns, button groups, and split buttons.

X Small

The x small size is a height of 24px, It is used for very special cases in components with reduced space such as sidebars.

Heading Example

1. Use the same height for all the buttons that are in the same row.

Do
Don't

2. Characters can not all be uppercase in a button.

Do
Don't

Last edited April 9, 2024 at 5:56:30 AM