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.
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!