Buttons

yarn add @clayui/button

Buttons communicate an action to happen on user interaction.

Display Types
Group
Icon
API

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.

import ClayButton from '@clayui/button';

import ClayButton from '@clayui/button';

const Component = () => {
	return (
		<>
			<ClayButton displayType="primary">
				Button Primary
			</ClayButton>
			<ClayButton displayType="secondary">
				Button Secondary
			</ClayButton>
			<ClayButton displayType="link">
				Button Link
			</ClayButton>
			<ClayButton displayType="unstyled">
				Button Unstyled
			</ClayButton>
		</>
	);
}

render(<Component />);

const Component = () => {
	return (
		<>
			<ClayButton displayType="primary">
				Button Primary
			</ClayButton>
			<ClayButton displayType="secondary">
				Button Secondary
			</ClayButton>
			<ClayButton displayType="link">
				Button Link
			</ClayButton>
			<ClayButton displayType="unstyled">
				Button Unstyled
			</ClayButton>
		</>
	);
}
render(<Component />);

<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>

<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>

<clay:button
	displayType="primary"
	label="Button Primary"
/>

<clay:button
	displayType="secondary"
	label="Button Secondary"
/>

<clay:button
	displayType="link"
	label="Button Link"
/>

<clay:button
	displayType="unstyled"
	label="Button Unstyled"
/>

<clay:button
	displayType="primary"
	label="Button Primary"
/>
<clay:button
	displayType="secondary"
	label="Button Secondary"
/>
<clay:button
	displayType="link"
	label="Button Link"
/>
<clay:button
	displayType="unstyled"
	label="Button Unstyled"
/>

Group

You can use the variant ClayButton.Group for creating button groups:

Use the spaced property to create spacing between buttons.

import ClayButton from '@clayui/button';

import ClayButton from '@clayui/button';

const Component = () => {
  return (
    <ClayButton.Group>
      <ClayButton>{"This"}</ClayButton>
      <ClayButton displayType="secondary">{"is"}</ClayButton>
      <ClayButton>{"a"}</ClayButton>
      <ClayButton displayType="secondary">{"button"}</ClayButton>
      <ClayButton>{"group."}</ClayButton>
    </ClayButton.Group>
  );
};

render(<Component />);

const Component = () => {
  return (
    <ClayButton.Group>
      <ClayButton>{"This"}</ClayButton>
      <ClayButton displayType="secondary">{"is"}</ClayButton>
      <ClayButton>{"a"}</ClayButton>
      <ClayButton displayType="secondary">{"button"}</ClayButton>
      <ClayButton>{"group."}</ClayButton>
    </ClayButton.Group>
  );
};
render(<Component />);

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

import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import ClayIcon from '@clayui/icon;

import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import ClayIcon from '@clayui/icon;

const Component = () => {
  return (
    <>
      <ClayButtonWithIcon spritemap={spritemap} symbol="times" />

      <br />
      <br />

      <ClayButton>
        <span className="inline-item inline-item-before">
          <ClayIcon spritemap={spritemap} symbol="times" />
        </span>

        {"Close w/ text"}
      </ClayButton>
    </>
  );
};

render(<Component />);

const Component = () => {
  return (
    <>
      <ClayButtonWithIcon spritemap={spritemap} symbol="times" />
      <br />
      <br />
      <ClayButton>
        <span className="inline-item inline-item-before">
          <ClayIcon spritemap={spritemap} symbol="times" />
        </span>
        {"Close w/ text"}
      </ClayButton>
    </>
  );
};
render(<Component />);

API

ClayButton

Property	Type	Required	Default	Description
alert	boolean	false		Flag to indicate if button is used within an alert component.
borderless	boolean	false		Flag to indicate if link should be borderless.
block	boolean	false		Renders the button as a block element.
displayType	'primary' \| 'secondary' \| 'link' \| 'unstyled'	false	'primary'	Determines how to button is displayed.
monospaced	boolean	false		Flag to indicate if button should be monospaced.
outline	boolean	false		Flag to indicate if link need have an outline.
small	boolean	false		Indicates button should be a small variant.
type		false	'button'

ClayButton.Group

Property	Type	Required	Default	Description
spaced	boolean	false		Flag to indicate the spacing between the buttons.
role		false	'group'

ClayButtonWithIcon

Property	Type	Required	Default	Description
spritemap	string	false		Path to the location of the spritemap resource.
symbol	string	true		The id of the icon in the spritemap.
monospaced		false	true

Examples
Sizes
Active state
Disabled State
Icons
- With text button

Don't forget to check WAI-ARIA accessibility pratices for buttons when writting your markup.

Examples

<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>

Sizes

<button class="btn btn-primary" type="button">Default</button>
<button class="btn btn-primary btn-sm" type="button">Small</button>

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

<button class="btn btn-block btn-secondary btn-sm" type="button">
	Small Block Level Button
</button>
<button class="btn btn-block btn-secondary" type="button">
	Normal Block Level Button
</button>

Active state

Buttons will appear pressed when active. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

<button class="active btn btn-primary" type="button">Primary</button>
<button class="active btn btn-secondary" type="button">Secondary</button>

Disabled State

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<button class="btn btn-primary" disabled="" type="button">Primary</button>
<button class="btn btn-secondary" disabled="" type="button">Secondary</button>

Icons

Buttons can display icons instead of text. The icons, however, must be monospaced inside the button. Lexicon doesn't use buttons with text and icons or text and loading indicators. Icon buttons are used primarily in management bars. This button variation can be primary, secondary, or borderless type.

Try adding the modifier class .btn-monospaced.

<button class="btn btn-monospaced btn-primary" type="button">
	<svg
		class="lexicon-icon lexicon-icon-blogs"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#blogs"></use>
	</svg>
</button>
<button class="btn btn-monospaced btn-secondary" type="button">
	<svg
		class="lexicon-icon lexicon-icon-blogs"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#blogs"></use>
	</svg>
</button>

With text button

This button type is only used in sites, outside of administration. The icon emphasizes and helps communicate the action. The label must match the icon's purpose.

Wrap the icon with the <span /> tag and adding the Inline Item utilities, try adding the .inline-item.inline-item-(before|after) modifier class.

<button class="btn btn-secondary" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-blogs"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share"></use>
		</svg>
	</span>
	Share
</button>