Posted inDXP Liferay Liferay 7

Mastering Clay UI Components in Liferay DXP 7.4: Buttons, Modals, and Alerts

Liferay UI Clay UI Components

Clay is Liferay’s official design system — a collection of UI components, CSS utilities, and design patterns that keep your portal’s look consistent and accessible.

If you’re developing with Liferay DXP 7.4, knowing how to use Clay components effectively can save hours of work while ensuring your UI aligns with Liferay’s native styling.

In this guide, we’ll explore the most commonly used Clay components — Buttons, Modals, and Alerts — with real-world examples.

1. What Is Clay UI?

Clay provides prebuilt UI components built with React and Lexicon design guidelines. You can use them directly in:

  • JSP portlets (via Clay taglibs)
  • React-based portlets (via Clay React components)

2. Using Clay Buttons

You can create styled buttons with the Clay taglib.

Example: JSP Portlet Button

<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>

<clay:button
    label="Save Changes"
    style="primary"
    icon="check"
/>

Output: A primary button with a check icon.

Other button styles include secondary, danger, link, and unstyled.

Clay Button in React

If your portlet uses React:

import ClayButton from '@clayui/button';

export default function ActionButtons() {
  return (
    <>
      <ClayButton displayType="primary" onClick={() => alert('Saved!')}>
        Save
      </ClayButton>

      <ClayButton displayType="secondary" className="ml-2">
        Cancel
      </ClayButton>
    </>
  );
}

3. Creating Modals with Clay

Modals are used for confirmations, forms, or warnings.

Example: React Modal Component

import React, { useState } from 'react';
import ClayModal, { useModal } from '@clayui/modal';
import ClayButton from '@clayui/button';

export default function ModalExample() {
  const [visible, setVisible] = useState(false);
  const { observer, onClose } = useModal({
    onClose: () => setVisible(false),
  });

  return (
    <>
      <ClayButton onClick={() => setVisible(true)}>Open Modal</ClayButton>

      {visible && (
        <ClayModal observer={observer} size="md">
          <ClayModal.Header>Confirmation</ClayModal.Header>
          <ClayModal.Body>Are you sure you want to continue?</ClayModal.Body>
          <ClayModal.Footer
            last={<ClayButton onClick={onClose}>Close</ClayButton>}
            first={
              <ClayButton displayType="primary" onClick={onClose}>
                Confirm
              </ClayButton>
            }
          />
        </ClayModal>
      )}
    </>
  );
}

This modal component works perfectly inside a React portlet.

4. Showing Alerts

Clay alerts are ideal for displaying success or error messages.

Example: JSP Alert

<clay:alert
    displayType="success"
    message="Your data has been saved successfully!"
/>

React Example:

import ClayAlert from '@clayui/alert';

export default function SuccessAlert() {
  return (
    <ClayAlert displayType="success" title="Success:">
      Your form has been submitted successfully!
    </ClayAlert>
  );
}

Supported displayType values: info, success, warning, danger.

5. Styling and Icons

Clay automatically provides Bootstrap 4/5 utilities and Lexicon icons.
Example to use an icon with a button:

<ClayButton displayType="secondary">
  <span className="inline-item inline-item-before">
    <svg className="lexicon-icon">
      <use href="/o/classic-theme/images/clay/icons.svg#plus" />
    </svg>
  </span>
  Add Item
</ClayButton>

6. Best Practices

✅ Use Clay variables for consistent colors ($primary, $danger, etc.).
✅ Keep components accessible — all Clay UI components are ARIA-ready.
✅ Avoid mixing legacy taglibs with React components in the same portlet.

Conclusion

Clay UI Components simplify front-end development in Liferay DXP 7.4 — offering ready-to-use, accessible, and consistent UI patterns. Whether you’re building modals, buttons, or alerts, Clay helps you stay aligned with the platform’s design principles.

Tags: