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 displayType attribute to info:
<clay:label displayType="info" label="Label text" />
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" />
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" />
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" />
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" />
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 with Links
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" />
Links
You can add traditional hyperlinks to your app with the <clay:link> tag:
<clay:link href="#" label="link text" />
Now you know how to add links and labels to your apps!