Buttons

yarn add @clayui/button

Buttons communicate an action to happen on user interaction.

Stable 3.83.0 View in Lexicon CHANGELOG

Display Types
Group
Icon

Display Types

You can determine how your button can be displayed using the displayType property:

Set displayType to unstyled to reset all the stylings from Bootstrap 4.

If you want use the button as a link set displayType to link.

Group

You can use the variant ClayButton.Group for creating button groups:

Use the spaced property to create spacing between buttons.

Code Sample (expand to see it)

Icon

You can use the high-level component ClayButtonWithIcon to create a button with only an icon. If you need an icon and text, you need to compose with ClayIcon

Code Sample (expand to see it)