Buttons

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)

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)

btn-beta-dark is a dark variant of btn-beta to be used with dark backgrounds.