Alert

Alerts are used to indicate user-driven notifications.


React Component

Alert colors

Alerts can be implemented in a few different colors. These also determine the icon that will appear by default.

A default alert

Make sure you know how these changes affect you.

An informative alert

Make sure you know how these changes affect you.

An informative alert

Make sure you know how these changes affect you.

Uh, oh! Here's a warning alert

Make sure you know how these changes affect you.

Look out! This alert means there's an error

Make sure you know how these changes affect you.

Alert actions

Alerts can include buttons and links for users to take further action. These include a single primary action button and one or more additional secondary actions.

Alert with all actions

Make sure you know how these changes affect you.

Link 1 Link 2

Dismissable Alerts

Alerts can be implemented in a few different colors. These also determine the icon that will appear by default.

Alerts emit a custom event, sage.alert.dismiss when the dismiss button is clicked. You can listen for this event as it bubbles and respond as you see fit.

This nifty alert can be dismissed

Make sure you know how these changes affect you.

Small Alerts

The small variant of Alert can be used for smaller spaces or a more minimal presence. They support all other properties with the exception of buttons in the sage_alerts_actions slot; only links are allowed.

Make sure you know how these changes affect you.

Sage Component

SageAlert
<%
  demo_description =  "Make sure you know how these changes affect you."
  demo_primary_action = {
    value: "Primary action",
    attributes: {
      href: "#href-for-primary-action"
    },
  }
%>

<%= md("
### Alert colors

Alerts can be implemented in a few different colors.
These also determine the icon that will appear by default.
", use_sage_type: true) %>
<%= sage_component SageAlert, {
  color: "default",
  title: "A default alert",
  desc: demo_description,
  icon_name: "info-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>
<%= sage_component SageAlert, {
  color: "info",
  title: "An informative alert",
  desc: demo_description,
  icon_name: "info-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>
<%= sage_component SageAlert, {
  color: "success",
  title: "An informative alert",
  desc: demo_description,
  icon_name: "check-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>
<%= sage_component SageAlert, {
  color: "warning",
  title: "Uh, oh! Here's a warning alert",
  desc: demo_description,
  icon_name: "danger-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>
<%= sage_component SageAlert, {
  color: "danger",
  title: "Look out! This alert means there's an error",
  desc: demo_description,
  icon_name: "warning-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<%= md("
### Alert actions

Alerts can include buttons and links for users to take further action.
These include a single primary action button and one or more additional secondary actions.

", use_sage_type: true) %>
<%= sage_component SageAlert, {
  color: "published",
  title: "Alert with all actions",
  desc: demo_description,
  icon_name: "check-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
    <%= sage_component SageLink, {
      url: "#href-for-link-1",
      label: "Link 1",
      launch: false,
      help_link: false,
      show_label: true,
      style: "secondary",
      remove_underline: true,
    } %>
    <%= sage_component SageLink, {
      url: "#href-for-link-1",
      label: "Link 2",
      launch: false,
      help_link: false,
      show_label: true,
      style: "secondary",
      remove_underline: true,
    } %>
  <% end %>
<% end %>


<%= md("
### Dismissable Alerts

Alerts can be implemented in a few different colors.
These also determine the icon that will appear by default.

Alerts emit a custom event, `sage.alert.dismiss` when the dismiss button is clicked.
You can listen for this event as it bubbles and respond as you see fit.
", use_sage_type: true) %>
<%= sage_component SageAlert, {
  color: "info",
  title: "This nifty alert can be dismissed",
  desc: demo_description,
  dismissable: true,
  icon_name: "info-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<%= md("
### Small Alerts

The `small` variant of Alert can be used for smaller spaces or a more minimal presence.
They support all other properties with the exception of buttons in the `sage_alerts_actions` slot; only links are allowed.
", use_sage_type: true) %>

<%= sage_component SageAlert, {
  color: "default",
  desc: demo_description,
  small: true,
  dismissable: true,
  icon_name: "info-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageLink, {
      url: "#href-for-link-1",
      label: "Link 1",
      launch: false,
      help_link: false,
      show_label: true,
      style: "secondary",
      remove_underline: true,
    } %>
    <%= sage_component SageLink, {
      url: "#href-for-link-1",
      label: "Link 2",
      launch: false,
      help_link: false,
      show_label: true,
      style: "secondary",
      remove_underline: true,
    } %>
  <% end %>
<% end %>


<script>
(function() {
  window.addEventListener("sage.alert.dismiss", function (evt) {
    console.log("local dismiss click", evt);
  });
})();
</script>
Property Description Type Default

color

Applies a color theme and a corresponding default icon.

"default", "info", "success", "warning", "danger", "approaching", "exceeded", "reached"

"default"

desc

Description text to be displayed.

String

nil

dismissable

Adds close icon and functionality to allow alert to be closed.

Boolean

nil

icon_name

Icon defaults are provided. Icons can also be customized with this property.

String

See Icons.

primary_action

Creates a primary action for the alert. See SageButton.

primary_action: {
  value: String,
  test_id: String,
  attributes: Hash,
}

nil

secondary_actions

An array of optional secondary actions. See SageLink.

Array<{
  value: String,
  url: String,
}>

nil

small

This property allows for a small variation of the Alert component. Per design specs, do not include a title, title_addon, or any actions.

Boolean

false

title

Title text to be displayed.

String

nil

title_addon

Allows text to be displayed along side the title, in body-small type spec.

String

nil

Sections

Element

sage_alert_actions

This area holds additional action links for the component. This should be used only if more than a primary and secondary button is needed. See properties primary_action and secondary_action.

link_to(s)

Events
Global/window events

sage.alert.dismiss

Fires when an alert's dismiss button is clicked.

Do
  • Use the primary_action property to create a custom button that aligns with design specs.

Don't
  • For small Alerts, do not include a title, title_addon, or any actions: primary_actions, secondary_actions, or content_for.

  • Do not use the content_for :sage_alert_actions unless needing 3 or more Alert actions.