Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts are available for any length of text, as well as an optional close button (activated by the dismissible attribute). For proper styling, use one of the eight required contextual variants. For inline dismissal, use the dismissible attribute or autodismiss attribute to set the countdown value.

Note

By default show attribute is set to false. To actually display the alert box you have to set show to true.

---

A simple primary alert—check it out!A simple secondary alert—check it out!A simple success alert—check it out!A simple danger alert—check it out!A simple warning alert—check it out!A simple info alert—check it out!A simple light alert—check it out!A simple dark alert—check it out!

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

---

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Web Component

<uxf-alert variant="primary" role="alert" show>  A simple primary alert—check it out!</uxf-alert>
<uxf-alert variant="secondary" role="alert" show>  A simple secondary alert—check it out!</uxf-alert>
<uxf-alert variant="success" role="alert" show>  A simple success alert—check it out!</uxf-alert>
<uxf-alert variant="danger" role="alert" show>  A simple danger alert—check it out!</uxf-alert>
<uxf-alert variant="warning" role="alert" show>  A simple warning alert—check it out!</uxf-alert>
<uxf-alert variant="info" role="alert" show>  A simple info alert—check it out!</uxf-alert>
<uxf-alert variant="light" role="alert" show>  A simple light alert—check it out!</uxf-alert>
<uxf-alert variant="dark" role="alert" show>  A simple dark alert—check it out!</uxf-alert>

React

import { UxfAlert } from '@magnolia-ea/uxf-react';
export default () => (    <>      <UxfAlert variant="primary" role="alert" show>        A simple primary alert—check it out!      </UxfAlert>
      <UxfAlert variant="secondary" role="alert" show>        A simple secondary alert—check it out!      </UxfAlert>
      <UxfAlert variant="success" role="alert" show>        A simple success alert—check it out!      </UxfAlert>
      <UxfAlert variant="danger" role="alert" show>        A simple danger alert—check it out!      </UxfAlert>
      <UxfAlert variant="warning" role="alert" show>        A simple warning alert—check it out!      </UxfAlert>
      <UxfAlert variant="info" role="alert" show>        A simple info alert—check it out!      </UxfAlert>
      <UxfAlert variant="light" role="alert" show>        A simple light alert—check it out!      </UxfAlert>
      <UxfAlert variant="dark" role="alert" show>        A simple dark alert—check it out!      </UxfAlert>    </>)

Angular

<uxf-alert variant="primary" role="alert" show>  A simple primary alert—check it out!</uxf-alert>
<uxf-alert variant="secondary" role="alert" show>  A simple secondary alert—check it out!</uxf-alert>
<uxf-alert variant="success" role="alert" show>  A simple success alert—check it out!</uxf-alert>
<uxf-alert variant="danger" role="alert" show>  A simple danger alert—check it out!</uxf-alert>
<uxf-alert variant="warning" role="alert" show>  A simple warning alert—check it out!</uxf-alert>
<uxf-alert variant="info" role="alert" show>  A simple info alert—check it out!</uxf-alert>
<uxf-alert variant="light" role="alert" show>  A simple light alert—check it out!</uxf-alert>
<uxf-alert variant="dark" role="alert" show>  A simple dark alert—check it out!</uxf-alert>

Additional content

Heading

You can add Alert Headings using the slot heading. This will style the heading matching to the alert variant.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

---

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Well done!

---

A simple success alert—check it out!

Web Component

<uxf-alert variant="success" role="alert" show>  <h4 slot="heading">Well done!</h4>  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>  <hr />  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></uxf-alert>
<uxf-alert variant="primary" role="alert" show>  <h4 slot="heading">Well done!</h4>  <hr/>  A simple success alert—check it out!</uxf-alert>

React

<UxfAlert variant="success" role="alert" show>  <h4 name="heading">Well done!</h4>  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>  <hr />  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></UxfAlert>
<UxfAlert variant="primary" role="alert" show>  <h4 slot="heading">Well done!</h4>  <hr/>  A simple success alert—check it out!    </UxfAlert>

Angular

<uxf-alert variant="success" role="alert" show>  <h4 slot="heading">Well done!</h4>  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>  <hr />  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></uxf-alert>
<uxf-alert variant="primary" role="alert" show>  <h4 slot="heading">Well done!</h4>  <hr/>  A simple success alert—check it out!    </uxf-alert>

More Content

Additionally to the Slot *heading' you can add any kind of element to the Alert.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

---

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Dismissing

With the attribute dismissible you can dismiss the alert inline. You can see this in action with a live demo:

Holy guacamole! You should check in on some of those fields below.

Web Component

<uxf-alert variant="warning" dismissible show>    <strong>Holy guacamole!</strong> You should check in on some of those fields below.</uxf-alert>

React

<UxfAlert variant="warning" dismissible show>  <strong>Holy guacamole!</strong> You should check in on some of those fields below.</UxfAlert>

Angular

<uxf-alert variant="warning" dismissible show>    <strong>Holy guacamole!</strong> You should check in on some of those fields below.</uxf-alert>

Auto-Dismiss

You can mix dismissible and autodismiss together.

Show Auto-Dismiss Alert

Web Component

<uxf-alert variant="warning" autodismiss="5" id="alert-test" show>  <strong>Holy guacamole!</strong> You should check in on some of those fields below.</uxf-alert>
<script>    document.querySelector("#alert-test").addEventListener("closed", () => {        alert("alert closed");    });</script>

React

<UxfAlert variant="warning" autodismiss="5" show onClosed={()=>alert("alert closed")}>  <strong>Holy guacamole!</strong> You should check in on some of those fields below.</UxfAlert>

Angular

import { Component } from '@angular/core';
@Component({  selector: 'app-root',  template: `    <uxf-alert #alert variant="warning" dismissible autodismiss="5">      <strong>Holy guacamole!</strong> You should check in on some of those fields below.    </uxf-alert>
    <uxf-button variant="primary" (click)="openAlert(alert)">Show Auto-Dismiss Alert</uxf-button>  `})
export class AppComponent {  openAlert(alert: any)  {    alert.el.setAttribute('show', true);    alert.closed.subscribe({      next() {        console.log("alert closed");      },      error(err: any) {        console.log('Error: ', err);      }    });  }}

Fixed

Sometimes you want to show the alert just as a flash message on top or bottom of the screen. By setting the attribute fixed to either top or bottom you can control the position.

Live Demo:

Show Alert on Top

Show Alert on bottom

Events

Closed

Holy guacamole! You should check in on some of those fields below.

Web Component

<uxf-alert variant="warning" dismissible id="alert-test" show>  <strong>Holy guacamole!</strong> You should check in on some of those fields below.</uxf-alert>
<script>    document.querySelector("#alert-test").addEventListener("closed", () => {        alert("alert closed");    });</script>

React

<UxfAlert variant="warning" dismissible show onClosed={()=>alert("alert closed")}>  <strong>Holy guacamole!</strong> You should check in on some of those fields below.</UxfAlert>

Angular

<uxf-alert variant="warning" dismissible show>  <strong>Holy guacamole!</strong> You should check in on some of those fields below.</uxf-alert>

Customizing

uxf-alert[variant=primary] {    color: green;}
uxf-alert.uxf-alert-warning {    color:rgb(184, 11, 184);        }
uxf-alert[variant=success] {    @extend .alert-success;}
uxf-alert::part(heading) {    padding: 0;    color: blue;    }