title: 'Buttons'
description: 'Buttons communicate an action to happen on user interaction.'
lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
packageNpm: '@clayui/button'
sibling: 'docs/components/css-buttons.html'
import {
ButtonDisplayTypes,
ButtonGroup,
} from '$clayui.com/src/components/clay/Button';
Display Types
You can determine how your button can be displayed using displayType
property:
Use unstyled
to reset all the stylings from Bootstrap 4.
If you want use the button as a link use link
.
Group
You can use the variant ClayButton.Group
for creating button groups:
Use spaced
property to create spacing between buttons.
API
ClayButton
[APITable "clay-button/src/Button.tsx"]
ClayButton.Group
[APITable "clay-button/src/Group.tsx"]
ClayButtonWithIcon
[APITable "clay-button/src/ButtonWithIcon.tsx"]