Button
View in LexiconButtons communicate an action to happen on user interaction.
| install | yarn add @clayui/button |
|---|---|
| version |  |
| use | import 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.
Link
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.
2. Characters can not all be uppercase in a button.