Submit Feedback

Clay Buttons

Buttons come in several types and variations. This tutorial covers the different styles and variations of buttons you can create with the Clay taglibs.

Types

Primary button: Used for the most important actions. Two primary buttons should not be together or near each other.

Primary button with label:

<clay:button label="Primary" />

A primary button is bright blue, grabbing the user's attention.

Secondary button: Used for secondary actions. There can be multiple secondary buttons together or near each other.

<div class="col">
    <clay:button displayType="secondary" label="Secondary" />
</div>
<div class="col">
    <clay:button ariaLabel="Wiki" displayType="secondary" icon="wiki" />
</div>

A secondary button draws less attention than a primary button and is meant for secondary actions.

Borderless button: Used in cases such as toolbars where the secondary button would be too heavy for the design. This keeps the design clean.

<div class="col">
    <clay:button displayType="borderless" label="Borderless" />
</div>
<div class="col">
    <clay:button ariaLabel="Page Template" displayType="borderless" icon="page-template" />
</div>

Borderless buttons remove the dark outline from the button.

Link button: Used for Cancel actions.

<div class="col">
    <clay:button displayType="link" label="Link" />
</div>
<div class="col">
    <clay:button ariaLabel="Add Role" displayType="link" icon="add-role" />
</div>

You can also turn buttons into links.

You can use labels or icons for your buttons. Below is an example of a Primary button with an icon:

<clay:button ariaLabel="Workflow" icon="workflow" />

Buttons can also display icons.

You can disable a button by adding the disabled attribute:

<div class="col">
    <clay:button disabled="<%= true %>" label="Primary" />
</div>
<div class="col">
    <clay:button ariaLabel="Workflow" disabled="<%= true %>" icon="workflow" />
</div>

Buttons can be disabled if you don't want the user to interact with them.

Variations

Button with icon and text:

<clay:button icon="share" label="Share" />

Buttons can display both icons and text.

Button with monospaced text:

<clay:button displayType="secondary" icon="indent-less" monospaced="<%= true %>" />

Buttons can display monospaced text.

Block level button:

<clay:button block="<%= true %>" label="Button" />

Block level buttons span the entire width of the container.

Plus button:

<clay:button displayType="secondary" icon="plus" monospaced="<%= true %>" />

A plus button is used for add actions in an app.

Action button:

<clay:button displayType="borderless" icon="ellipsis-v" monospaced="<%= true %>" />

An action button is used to display actions menus.

Capability:
Development and Tooling
Resource Type:
Official Documentation
Feature:
Java Development
Deployment Approach:
Liferay PaaS
Liferay Self-Hosted