Clay Labels and Links

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

Labels

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 style attribute to info:

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

Figure 1: Info labels convey general information.

Figure 1: 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 style attribute:

<clay:label label="Status" />

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

Figure 2: 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 style attribute to warning:

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

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

Figure 3: 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 style attribute to danger:

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

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

Figure 4: 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 style attribute to success:

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

Figure 5: Success labels indicate a successful action.

Figure 5: Success labels indicate a successful action.

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

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

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

Figure 6: Labels can be removable.

Figure 6: 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" />

Figure 7: Labels can also be links.

Figure 7: Labels can also be links.

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

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

Figure 8: Clay taglibs also provide link elements.

Figure 8: Clay taglibs also provide link elements.

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

« Clay IconsClay Management Toolbar »
Was this article helpful?
0 out of 0 found this helpful