Notification Banner

Notification Banners provide prominent feedback to the user. They are typically used for system-wide alerts, success confirmations, or errors. 🔔

Installation

You can install the Notification Banner component using the global design system bundle or as a standalone script.

Using the Bundle

<script src="https://webcdn.ringover.com/app/download/design-system/lts/design-system.js"></script>
<script>
const { RoNotificationBanner } = RingoUI;
customElements.define('ro-notification-banner', RoNotificationBanner);
</script>

Standalone

<script src="https://webcdn.ringover.com/app/download/design-system/lts/notification-banner.js"></script>
<script>
customElements.define('ro-notification-banner', RoNotificationBanner.RoNotificationBanner);
</script>

Examples

Basic Usage

Use the <ro-notification-banner> element. Set the data-ro-color attribute to define the context (success, warning, error, etc.) and message for the text.

<ro-notification-banner
  data-ro-color="success"
  message="Your changes have been saved successfully.">
</ro-notification-banner>

Preview

Banner Colors

The banner supports several semantic colors: success, warning, danger, neutral (default), and black.

<ro-notification-banner message="Info (neutral)"></ro-notification-banner>
<ro-notification-banner data-ro-color="success" message="Success"></ro-notification-banner>
<ro-notification-banner data-ro-color="warning" message="Warning"></ro-notification-banner>
<ro-notification-banner data-ro-color="danger" message="Error"></ro-notification-banner>
<ro-notification-banner data-ro-color="black" message="System (Black)"></ro-notification-banner>

Preview

Actions and Dismissal

Banners can have up to three action buttons and a dismiss button. Use attributes like action-label and dismissible to configure them.

<ro-notification-banner
  id="banner-actions"
  data-ro-color="warning"
  message="Your subscription is expiring soon."
  action-label="Renew Now"
  data-action="renew"
  secondary-action-label="Remind Later"
  data-secondary-action="remind"
  dismissible
  dismissible-label="Close">
</ro-notification-banner>

Preview

Attributes

Attribute	Description
data-ro-color	Semantic color. Options: success, warning, danger, neutral, black.
message	The text content of the banner.
dismissible	Boolean. If present, shows a close/dismiss button.
dismissible-label	Label for the dismiss button.
dismissible-icon	Icon for the dismiss button. Default: cross-circle.
action-label	Label for the primary action button.
data-action	Identifier string included in the action-click event detail.
action-icon	Icon for the primary action. Default: arrow-right-circle.
secondary-action-label	Label for the secondary action button.
data-secondary-action	Identifier for the secondary action event.
tertiary-action-label	Label for the tertiary action button.
data-tertiary-action	Identifier for the tertiary action event.

JavaScript & Events

The banner emits custom events when buttons are clicked.

Event Details

Event Name	Detail	Description
action-click	{ action, type, message }	Fired when the primary action button is clicked.
secondary-action-click	{ action, type, message }	Fired when the secondary action button is clicked.
tertiary-action-click	{ action, type, message }	Fired when the tertiary action button is clicked.
banner-dismissed	undefined	Fired when the banner is removed via the dismiss button.

Example

const banner = document.getElementById("banner-actions");

// Handle primary action
banner.addEventListener("action-click", (e) => {
  console.log("Primary action clicked:", e.detail.action); // "renew"
  if (e.detail.action === "renew") {
    // Redirect to renewal page
  }
});

// Handle secondary action
banner.addEventListener("secondary-action-click", (e) => {
  console.log("Secondary action clicked:", e.detail.action); // "remind"
});

// Handle dismissal
banner.addEventListener("banner-dismissed", () => {
  console.log("Banner was closed by the user.");
});