@clayui/button

ClayButton component

Usage no npm install needed!

<script type="module">
  import clayuiButton from 'https://cdn.skypack.dev/@clayui/button';
</script>

README

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