Liferay Clay taglibs provide tags for creating labels and links in your app. This tutorial shows how to add both of these UI elements to your apps.
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.
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.
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.
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.
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.
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.
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" />
Figure 7: Labels can also be links.
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.
Now you know how to add links and labels to your apps!