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