Alert

Alerts are used to indicate user-driven notifications.


React Component

Dismissable Alert

Our privacy policy has changed (as of November 11, 2021)

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Our privacy policy has changed (as of November 11, 2021)

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Account settings updated

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Exceeded product amount limit

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

App outage tonight at 12am

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Non-Dismissable Alert (no close button)

Our privacy policy has changed

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Link Link

Our privacy policy has changed

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Link Link

Account settings updated

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Link Link

Exceeded product amount limit

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Link Link

App outage tonight at 12am

Make sure you know how these changes affect you. Make sure you know how these changes affect you.

Link Link

Small Alerts

Make sure you know how these changes affect you.

Make sure you know how these changes affect you.

Make sure you know how these changes affect you.

Make sure you know how these changes affect you.

Make sure you know how these changes affect you.

Events

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.

Sage Component

SageAlert
<%
  sage_link = sage_component(SageLink, {
   url: "#",
    label: "Link",
    launch: false,
    help_link: false,
    show_label: true,
    style: "secondary"
  })
%>
<h3>Dismissable Alert</h3>
<!-- Default -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "default",
  title: "Our privacy policy has changed",
  title_addon: "(as of November 11, 2021)",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-info-circle-filled",
  dismissable: true,
  primary_action: {
    value: "Primary",
    test_id: "primary_action",
  },
  secondary_actions: [
    {
      value: "Link",
      url: "#",
    },
    {
      value: "Another link",
      url: "#"
    },
  ],
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
  <% end %>
<% end %>
<!-- Info -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "info",
  title: "Our privacy policy has changed",
  title_addon: "(as of November 11, 2021)",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-info-circle-filled",
  dismissable: true,
  primary_action: {
    value: "Primary",
    test_id: "primary_action",
  },
  secondary_actions: [
    {
      value: "Link",
      url: "#"
    },
    {
      value: "Another link",
      url: "#"
    },
  ],
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Success -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "published",
  title: "Account settings updated",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-check-circle-filled",
  dismissable: true,
  primary_action: {
    value: "Primary - Link",
    attributes: {
      href: "#element-button"
    },
  },
  secondary_actions: [
    {
      value: "Secondary - Link",
      url: "#element-button"
    },
  ],
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Warning -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "warning",
  title: "Exceeded product amount limit",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-warning-filled",
  dismissable: true,
  primary_action: {
    value: "Primary - Link",
    attributes: {
      href: "#element-button"
    },
  }, 
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Danger -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "danger",
  title: "App outage tonight at 12am",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-danger-filled",
  dismissable: true,
  primary_action: {
    value: "Primary"
  }
} %>

<h3>Non-Dismissable Alert (no close button)</h3>

<!-- Default -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "default",
  title: "Our privacy policy has changed",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-info-circle-filled",
  primary_action: {
    value: "Primary"
  },
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Info -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "info",
  title: "Our privacy policy has changed",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-info-circle-filled",
  primary_action: {
    value: "Primary"
  },
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Success -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "published",
  title: "Account settings updated",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-check-circle-filled",
  primary_action: {
    value: "Primary"
  },
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Warning -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "warning",
  title: "Exceeded product amount limit",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-warning-filled",
  primary_action: {
    value: "Primary"
  },
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Danger -->
<%= sage_component SageAlert, {
  spacer: { bottom: "2xs" },
  color: "danger",
  title: "App outage tonight at 12am",
  desc: "Make sure you know how these changes affect you. Make sure you know how these changes affect you.",
  icon_name: "sage-icon-danger-filled",
  primary_action: {
    value: "Primary"
  },
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
    <%= sage_link %>
  <% end %>
<% end %>

<h3>Small Alerts</h3>

<!-- Default -->
<%= sage_component SageAlert, {
  spacer: { bottom: :md },
  color: "default",
  desc: "Make sure you know how these changes affect you.",
  icon_name: "sage-icon-info-circle-filled",
  small: true,
  dismissable: true,
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Info -->
<%= sage_component SageAlert, {
  spacer: { bottom: :md },
  color: "info",
  desc: "Make sure you know how these changes affect you.",
  icon_name: "sage-icon-info-circle-filled",
  small: true,
  dismissable: true,
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Success -->
<%= sage_component SageAlert, {
  spacer: { bottom: :md },
  color: "published",
  desc: "Make sure you know how these changes affect you.",
  icon_name: "sage-icon-check-circle-filled",
  small: true,
  dismissable: true,
} %>

<!-- Warning -->
<%= sage_component SageAlert, {
  spacer: { bottom: :md },
  color: "warning",
  desc: "Make sure you know how these changes affect you.",
  icon_name: "sage-icon-warning-filled",
  small: true,
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_link %>
  <% end %>
<% end %>

<!-- Danger -->
<%= sage_component SageAlert, {
  spacer: { bottom: :md },
  color: "danger",
  desc: "Make sure you know how these changes affect you.",
  icon_name: "sage-icon-danger-filled",
  small: true,
} %>

<%= md("
### Events

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) %>

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

color

Applies color to alert. Options include info, success, warning, danger, approaching, exceeded, reached

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

nil

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 Sage Icons.

primary_action

Creates a custom primary action button for the Alert.

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

nil

secondary_actions

An array of optional secondary actions.

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.