Clay Labels and Links

Clay Labels and Links

Liferay Clay taglibs provide tags for creating labels and links in your app. Both of these elements are covered below.


The Liferay Clay taglibs provide a few different labels for your app. Use the clay:label tag to add a label to your app. You can create color-coded labels, removable labels, and labels that contain links. The sections below demonstrate all of these options.

Color-coded Labels

The Liferay Clay labels come in four different colors: dark-blue for info, light-gray for status, orange for pending, red for rejected, and green for approved.

Info labels are dark-blue, and since they stand out a bit more than status labels, they are best for conveying general information. To use an info label, set the displayType attribute to info:

<clay:label displayType="info" label="Label text" />

Info labels convey general information.

Status labels are light-gray, and due to their neutral color, they are best for conveying basic information. Status labels are the default label and therefore require no displayType attribute:

<clay:label label="Status" />

Status labels are the least flashy and best for displaying basic information.

Warning labels are orange, and due to their color, they are best for conveying a warning message. To use a warning label, set the displayType attribute to warning:

<clay:label displayType="warning" label="Pending" />

Warning labels notify the user of issues, but nothing app breaking.

Danger labels are red and indicate that something is wrong or has failed. To use a danger label, set the displayType attribute to danger:

<clay:label displayType="danger" label="Rejected" />

Danger labels convey a sense of urgency that must be addressed.

Success labels are green and indicate that something has completed successfully. To use a success label, set the displayType attribute to success:

<clay:label displayType="success" label="Approved" />

Success labels indicate a successful action.

Labels can also be bigger. Set the size attribute to lg to display large labels:

<clay:label displayType="success" label="Approved" size="lg" />

Removable Labels

If you want to let a user close a label (e.g. a temporary notification), you can make the label removable by setting the closeable attribute to true.

<clay:label closeable="<%= true %>" label="Normal Label" />

Labels can be removable.

You can make a label a link by adding the href attribute to it just as you would an anchor tag:

<clay:label href="#" label="Label Text" />

Labels can also be links.

You can add traditional hyperlinks to your app with the <clay:link> tag:

<clay:link href="#" label="link text" />

Clay taglibs also provide link elements.

Now you know how to add links and labels to your apps!