@clayui/button

---

title: 'Buttons' description: 'Buttons communicate an action to happen on user interaction.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/' packageNpm: '@clayui/button'

import { ButtonDisplayTypes, ButtonGroup, ButtonIcon, } from '$packages/clay-button/docs/index';

• 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.

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

Changelog

3.32.0 (2021-07-28)

Bug Fixes

• @clayui/autocomplete: fixes a potential XSS vulnerability in autocomplete by removing the use of dangerouslySetInnerHTML (675910c)
• @clayui/color-picker: fix error of "hidden" input add extra margin (f4d8aa0)
• @clayui/css: Cadmin Links adds component-text and component-icon, generic names for reuse in other components (ae49f03)
• @clayui/css: Cadmin Treeview new component (ea1568e)
• @clayui/css: Forms form-group-sm div.form-control should be 32px tall and grow to fix content inside, similar to a textarea element (eb987a1), closes #4164
• @clayui/css: Grid generating container-max-width-* classes should work with Custom Properties (b12dbf5)
• @clayui/css: Mixins update clay-loading-animation-variant to use clay-css pattern (4280c6f), closes #3987
• @clayui/css: Mixins update sheet-footer-btn-block to use clay-css pattern (5523b67), closes #3987
• @clayui/css: Sheet $sheet-lg-max-width should use fixed number instead of generating based on a $container-max-widths value (5968bd5)
• @clayui/css: Utilities remove duplicate rounded utilities (6687624)
• @clayui/shared: fixes error when getting stuck in an input masked as hidden (4c0c5cb)
• @clayui/tooltip: Hide tooltip on dragstart (70d78da)
• clayui.com: fixes error when generating slugs for documents inside packages (5e00f5a)

Features

• @clayui/core: Add Provider component and the new @clayui/core package (1d4e4b3)
• @clayui/core: adds theme API to Provider (e7bae7d)
• @clayui/css: $container-max-widths Sass map should accept CSS Custom Properties (3a8ffe2)
• @clayui/css: Buttons use nested property names in variables to stay as close as possible to the way our CSS is written (89e3360), closes #4176
• @clayui/css: Functions adds map-deep-get for getting values of deeply nested Sass map items (2b80302)
• @clayui/pagination-bar: Add the showDeltasDropDown prop (6c65f43), closes #4175