Buttons
Buttons communicate an action to happen on user interaction.
install | yarn add @clayui/button |
---|---|
version | 3.107.0 |
Stable3.107.0View in LexiconCHANGELOG
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.
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
Translucent
The boolean attribute translucent
renders a button with an opaque background color optimized for light backgrounds. It renders as an extra small button with rounded borders.
Dark
The boolean attribute dark
renders a button with an opaque background color optimized for dark backgrounds. It adds the class clay-dark
to the button. The class clay-dark
can be added to the parent element to make buttons contained inside render the dark variant. When adding clay-dark
to the parent element, the dark
attribute on the button should be omitted.
Beta (Deprecated)
displayType="beta"
has been deprecated in favor of semantic attributes displayType="info"
and translucent
.A component to indicate beta features in DXP. The Button variant should be used when the component can be placed close to a non-interactive UI element, such as a title or a section. Also, a default popover is shown if the user interacts with it.
Beta Dark (Deprecated)
displayType="beta-dark"
has been deprecated in favor of semantic attributes dark
, displayType="info"
and translucent
.btn-beta-dark
is a dark variant of btn-beta
to be used with dark backgrounds.