UCLA Design System

Alerts

An alert keeps users informed of important and sometimes time-sensitive changes.

When to use

Use alerts to validate steps taken by users or denote a system change. Use alerts aparingly. Show one at a time to avoid overwhelming users.

System status messages. An alert may be a notification that keeps people informed of the status of the system and may or may not require the user to respond. Such notifications may be errors, warning, and general updates.

Validation messages. An alert may be a validation message that informs a user they just took an action that needs to be corrected or a confirmation that a task was completed successfully.

Broad context. Alers should refer to something relatively broad such as the state of a system, the topic of a page or a unit or department status. For specific field feedback or page elements, see Forms/Error Messages.

Anatomy

Alerts Anatomy

1. Title (required)

2. Leading icon

3. Container (required)

4. Trailing Dismiss Icon

Alert will disappear on click.

Best practices

Consider next steps. When the user is required to do something in response to an alert, let them know what they need to do, and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human-readable language; avoid jargon and computer code.

Be polite. Be polite in error messages — don’t blame the user.

Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.

Allow a user to dismiss a notification wherever appropriate.

Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.

Examples

<!-- Primary -->
<div class="ucla-alert ucla-alert--primary" role="alert">
  <svg
    class="ucla-alert--icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
    xml:space="preserve"
    role="img"
    aria-label="Information:"
  ><path
      d="M24 4C13 4 4 13 4 24s9 20 20 20 20-9 20-20S35 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z"
    /></svg>
  A simple primary alert-check it out!
  <button class="ucla-alert--close" title="Close" aria-label="Close">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 48 48"
      xml:space="preserve"
      aria-label="Dismiss alert"
    ><path
        class="close--black"
        d="M38 12.8 35.2 10 24 21.2 12.8 10 10 12.8 21.2 24 10 35.2l2.8 2.8L24 26.8 35.2 38l2.8-2.8L26.8 24 38 12.8z"
      /></svg>
  </button>
</div>

<!-- Secondary -->
<div class="ucla-alert ucla-alert--secondary" role="alert">
  <svg
    class="ucla-alert--icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
    xml:space="preserve"
    role="img"
    aria-label="Information:"
  ><path
      d="M24 4C13 4 4 13 4 24s9 20 20 20 20-9 20-20S35 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z"
    /></svg>
  A simple secondary alert-check it out!
  <button class="ucla-alert--close" title="Close" aria-label="Close">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 48 48"
      xml:space="preserve"
      aria-label="Dismiss alert"
    ><path
        class="close--black"
        d="M38 12.8 35.2 10 24 21.2 12.8 10 10 12.8 21.2 24 10 35.2l2.8 2.8L24 26.8 35.2 38l2.8-2.8L26.8 24 38 12.8z"
      /></svg>
  </button>
</div>

<!-- Success -->
<div class="ucla-alert ucla-alert--success" role="alert">
  <svg
    class="ucla-alert--icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
    xml:space="preserve"
    role="img"
    aria-label="Success:"
  ><path
      class="success--green"
      d="M24 4c11 0 20 9 20 20s-9 20-20 20S4 35 4 24 13 4 24 4zm8.4 12.1L22.2 26.2l-4.6-4.6c-.2-.2-.4-.2-.6 0l-2.9 2.9c-.2.2-.2.4 0 .6L22 33c.1.1.2.1.3.1.1 0 .2 0 .3-.1l13.3-13.3c.2-.2.2-.4 0-.6l-2.9-3c-.2-.1-.5-.1-.6 0z"
    /></svg>
  A simple success alert-check it out!
  <button class="ucla-alert--close" title="Close">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 48 48"
      xml:space="preserve"
      aria-label="Dismiss alert"
    ><title>Close</title><path
        class="close--black"
        d="M38 12.8 35.2 10 24 21.2 12.8 10 10 12.8 21.2 24 10 35.2l2.8 2.8L24 26.8 35.2 38l2.8-2.8L26.8 24 38 12.8z"
      /></svg>
  </button>
</div>

<!-- Error -->
<div class="ucla-alert ucla-alert--error" role="alert">
  <svg
    class="ucla-alert--icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
    xml:space="preserve"
    role="img"
    aria-label="Error:"
  ><path
      d="M24 4C13 4 4 13 4 24s9 20 20 20 20-9 20-20S35 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z"
    /></svg>
  A simple error alert-check it out!
  <button class="ucla-alert--close" title="Close" aria-label="Dismiss alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 48 48"
      xml:space="preserve"
      aria-label="Dismiss alert"
    ><title>Close</title><path
        class="close--black"
        d="M38 12.8 35.2 10 24 21.2 12.8 10 10 12.8 21.2 24 10 35.2l2.8 2.8L24 26.8 35.2 38l2.8-2.8L26.8 24 38 12.8z"
      /></svg>
  </button>
</div>

<!-- Warning -->
<div class="ucla-alert ucla-alert--warning" role="alert">
  <svg
    class="ucla-alert--icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
    xml:space="preserve"
    role="img"
    aria-label="Warning:"
  ><path
      class="warning--orange"
      d="m24 0 22 38H2L24 0zm2 28h-4v4h4v-4zm0-12h-4v8h4v-8z"
    /></svg>
  A simple warning alert-check it out!
  <button class="ucla-alert--close" title="Close" aria-label="Dismiss alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 48 48"
      xml:space="preserve"
    ><path
        class="close--black"
        d="M38 12.8 35.2 10 24 21.2 12.8 10 10 12.8 21.2 24 10 35.2l2.8 2.8L24 26.8 35.2 38l2.8-2.8L26.8 24 38 12.8z"
      /></svg>
  </button>
</div>