Overview | Clarity Design System

Alerts are banners that are designed to draw the users attention to an important message. Icons and color indicate the type and urgency of the information contained within the message.

Usage

Use alerts to grab the user’s attention to provide critical information needed in context.

Types

There are two types of alerts, standard alerts and app level alerts.

Standard alerts

Standard alerts are used in the context of an application either in the content area itself or within components.

There are four different sub-types of standard alerts: error, warning, info, and success.

Ordered standard alerts by the urgency in which the user needs to pay attention to: error, warning, info, then success. In the case there are multiple of each sub-type all of them are shown before another sub-type is reached. For example, multiple errors are shown before the first warning is.

App-Level Alerts

App-level alerts are used in the global context of an application. They are placed at the very top of all content and navigation.

There are three different sub-types of app-level alerts info, warning, and error.

Sub-types

There are four different sub-types of standard alerts: error, warning, info, and success. Order standard alerts by the urgency in which the user needs to pay attention to: error, warning, info, then success. In the case there are multiple of each sub-type, all of them are shown before another sub-type is reached. For example, multiple errors are shown before the first warning is.

Error

Reserved for errors, malfunctions, as well as critical issues like license expiration.

Warning

Reserved for warnings: a message that needs the user attention and acknowledgment but might not cause errors.

Info

Reserved for errors, malfunctions, as well as critical issues like license expiration.

Success

Reserved to provide to a static persistent success message.

Anatomy

A standard alert consist of an icon, a message, and optional actions in a container. -Left align the icon and message. Right aligned the actions.

Size

There are two sizes of standard alerts: default and compact. Use the compact alert only in places where vertical space is scarce and information density is needed. Cards provide a good example here.

Placement

Standard alerts are used in the context of an application either in the content area itself or within components.

In Modals

Alerts could appear within modals. It is recommended that no more than one alert appear within a modal. Their function should not be to validate, validation should be done inline and closer to the error itself.

In Cards

It is recommended to use concise language as you share an alert within a card. It is also recommended to use a compact-size alert. The focus of the alert should be on its content not on the alert appearing in it.

It is also recommended to have an alert at the very top of a card, on top of its title. An alert is meant to attract the attention of the user.

Using more than one alert within a card distracts the user and dilutes the importance of the alerts displayed. There are three sub-types of app-level alerts: error, warning, and info.

App-Level Alerts

App-level alerts are used in the global context of an application. They are placed at the very top of all content and navigation.

Sub-types

There are three different sub-types of app-level alerts info, warning, and error. App-level alerts follow the same urgency order as standard alerts: error, warning, and info.

Why no success app-level alert? App-level alerts are global in nature. Reporting a success of an operation should either be communicated within context or as a notification message.

Anatomy

An app-level alert consist of an icon, a message, and optional actions in a container. - All elements are centered-aligned. -Add anatomy for inline alerts - Need to add pagination

Placement

App-level alerts are placed at the very top of the global context. They should not be placed in any other configuration. Their purpose is to provide global alerts available and relating to the full context of the overall application.

Content

Depending on the sub-type of a standard alert, make sure to communicate a clear, concise, and actionable message.

Code & Examples

Several classes and elements are required to implement the Clarity alert layout. A table of these classes and elements with a brief description of each follows:

.alert	This class is a wrapper around .alert-items and the .close button. Place the .close button before the alert items.
.alert-items	This class is a wrapper around one or more .alert-items elements.
.alert-item	This class is a wrapper around .alert-text, .alert-icon-wrapper, and .alert-actions.
.alert-icon-wrapper	.alert-icon-wrapper contains a clr-icon with the classname .alert-icon applied to it. The icons used for the different alert types of success, danger, warning, and info are, respectively: check-circle, exclamation-circle, exclamation-triangle, and info-circle.
.alert-actions	.alert-actions can consist of dropdowns or links. Each action should extend the .alert-action class.

Types

Clarity has error, warning, information, and success alerts denoted by the following classes:

.alert-danger
.alert-warning
.alert-info
.alert-success

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Acknowledge Reset to green

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="alert alert-danger" role="alert">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
      </div>
      <span class="alert-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </span>
      <div class="alert-actions">
        <div class="alert-action dropdown bottom-right">
          <button class="dropdown-toggle">
            Actions
            <clr-icon shape="caret down"></clr-icon>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Shutdown</a>
            <a class="dropdown-item" href="javascript:void(0)">Suspend</a>
            <a class="dropdown-item" href="javascript:void(0)">Reboot</a>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
      </div>
      <span class="alert-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur.
      </span>
      <div class="alert-actions">
        <div class="alert-action dropdown bottom-right">
          <button class="dropdown-toggle">
            Actions
            <clr-icon shape="caret down"></clr-icon>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Shutdown</a>
            <a class="dropdown-item" href="javascript:void(0)">Suspend</a>
            <a class="dropdown-item" href="javascript:void(0)">Reboot</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="alert alert-warning" role="alert">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="exclamation-triangle"></clr-icon>
      </div>
      <span class="alert-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur.
      </span>
      <div class="alert-actions">
        <div class="alert-action dropdown bottom-right open">
          <button class="dropdown-toggle">
            Actions
            <clr-icon shape="caret down"></clr-icon>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Shutdown</a>
            <a class="dropdown-item" href="javascript:void(0)">Suspend</a>
            <a class="dropdown-item" href="javascript:void(0)">Reboot</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button type="button" class="close" aria-label="Close">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>
<div class="alert alert-info" role="alert">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
      </div>
      <span class="alert-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </span>
      <div class="alert-actions">
        <a href="javascript:void(0)" class="alert-action">Acknowledge</a>
        <a href="javascript:void(0)" class="alert-action">Reset to green</a>
      </div>
    </div>
  </div>
  <button type="button" class="close" aria-label="Close">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>
<div class="alert alert-success" role="alert">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="check-circle"></clr-icon>
      </div>
      <span class="alert-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </span>
    </div>
  </div>
</div>

Placement

Alerts in the Content Area

This alert is at the top of the page.

This alert is in the middle of the page.

<div class="main-container min-height-demo">
  <header class="header header-6">
    <div class="branding">
      <span class="title">Header</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <div class="alert alert-danger">
        <div class="alert-items">
          <div class="alert-item static">
            <div class="alert-icon-wrapper">
              <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
            </div>
            <span class="alert-text">
              This alert is at the top of the page.
            </span>
          </div>
        </div>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </p>
      <div class="alert alert-success">
        <div class="alert-items">
          <div class="alert-item static">
            <div class="alert-icon-wrapper">
              <clr-icon class="alert-icon" shape="check-circle"></clr-icon>
            </div>
            <span class="alert-text">
              This alert is in the middle of the page.
            </span>
          </div>
        </div>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </p>
    </div>
  </div>
</div>

Alerts in Cards

Use small alerts in a card.

Project B Owner: Jane Doe

...

Button One Button Two

<div class="card">
  <div class="card-block">
    <div class="alert alert-warning alert-sm" role="alert">
      <div class="alert-items">
        <div class="alert-item static">
          <div class="alert-icon-wrapper">
            <clr-icon class="alert-icon" shape="exclamation-triangle"></clr-icon>
          </div>
          <div class="alert-text">
            Use small alerts in a card.
          </div>
        </div>
      </div>
      <button type="button" class="close" aria-label="Close">
        <clr-icon aria-hidden="true" shape="close"></clr-icon>
      </button>
    </div>
    <div class="card-media-block wrap">
      <img class="card-media-image" src="//placehold.it/60x60" />
      <div class="card-media-description">
        <span class="card-media-title">Project B</span>
        <span class="card-media-text">Owner: Jane Doe</span>
      </div>
    </div>
    <p class="card-text">...</p>
  </div>
  <div class="card-footer">
    <a class="card-link">Button One</a>
    <a class="card-link">Button Two</a>
  </div>
</div>

Alerts in Modals

<div class="modal static bump-down">
  <div class="modal-dialog" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="alert alert-danger" role="alert">
        <div class="alert-items">
          <div class="alert-item static">
            <div class="alert-icon-wrapper">
              <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
            </div>
            <span class="alert-text">
              Alert in a modal.
            </span>
          </div>
        </div>
      </div>
      <div class="modal-header">
        <button aria-label="Close" class="close" type="button">
          <clr-icon aria-hidden="true" shape="close"></clr-icon>
        </button>
        <h3 class="modal-title">I have a nice title</h3>
      </div>
      <div class="modal-body">
        <p>But not much to say...</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline" type="button">Cancel</button>
        <button class="btn btn-primary" type="button">Ok</button>
      </div>
    </div>
  </div>
</div>

Size

Use the .alert-sm class with .alert for an alert 24 pixels in height. The default is 36 pixels.

This is an alert with 36px height.

This is an alert with 24px height.

<div class="alert alert-danger">
  <div class="alert-items">
    <div class="alert-item static" role="alert">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
      </div>
      <span class="alert-text">
        This is an alert with 36px height.
      </span>
    </div>
  </div>
  <button type="button" class="close" aria-label="Close">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>
<div class="alert alert-success alert-sm" role="alert">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="check-circle"></clr-icon>
      </div>
      <span class="alert-text">
        This is an alert with 24px height.
      </span>
    </div>
  </div>
  <button type="button" class="close" aria-label="Close">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>

App-Level Alerts

.alert-app-level

This class must be applied with .alert to render an app-level alert.

Alert Type: Danger

Alert Type: Warning

Alert Type: Info

<div class="alert alert-app-level alert-danger" style="margin-bottom: 24px;" role="alert">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
      </div>
      <div class="alert-text">
        Alert Type: Danger
      </div>
      <div class="alert-actions">
        <button class="btn alert-action">Action</button>
      </div>
    </div>
  </div>
  <button type="button" class="close" aria-label="Close">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>
<div class="alert alert-app-level alert-warning" style="margin-bottom: 24px;" role="alert">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="exclamation-triangle"></clr-icon>
      </div>
      <div class="alert-text">
        Alert Type: Warning
      </div>
      <div class="alert-actions">
        <button class="btn alert-action">Action</button>
      </div>
    </div>
  </div>
  <button type="button" class="close" aria-label="Close">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>
<div class="alert alert-app-level alert-info" role="alert">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
      </div>
      <div class="alert-text">
        Alert Type: Info
      </div>
      <div class="alert-actions">
        <button class="btn alert-action">Action</button>
      </div>
    </div>
  </div>
  <button type="button" class="close" aria-label="Close">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>

CSS

App-Level Alert in the main-container

A new update is now available. Upgrade to v.1234.

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

<div class="main-container min-height-demo">
  <div class="alert alert-app-level alert-info">
    <div class="alert-items">
      <div class="alert-item static">
        <div class="alert-icon-wrapper">
          <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
        </div>
        <div class="alert-text">
          A new update is now available. Upgrade to v.1234.
        </div>
        <div class="alert-actions">
          <button class="btn alert-action">Install Update</button>
        </div>
      </div>
    </div>
    <button type="button" class="close" aria-label="Close">
      <clr-icon aria-hidden="true" shape="close"></clr-icon>
    </button>
  </div>
  <header class="header header-6">
    <div class="branding">
      <span class="title">Header</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <p>
        Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to
        corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the
        holistic world view of disruptive innovation via workplace diversity and empowerment.
      </p>
    </div>
  </div>
</div>

Custom Icon in an App-Level Alert

A new update is now available. Upgrade to v.1234.

<div class="main-container min-height-demo">
  <div class="alert alert-app-level alert-warning">
    <div class="alert-items">
      <div class="alert-item static">
        <div class="alert-icon-wrapper">
          <clr-icon class="alert-icon" shape="download"></clr-icon>
        </div>
        <div class="alert-text">
          A new update is now available. Upgrade to v.1234.
        </div>
        <div class="alert-actions">
          <button class="btn alert-action">Install Update</button>
        </div>
      </div>
    </div>
    <button type="button" class="close" aria-label="Close">
      <clr-icon aria-hidden="true" shape="close"></clr-icon>
    </button>
  </div>
  <header class="header header-6">
    <div class="branding">
      <span class="title">Header</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <p>
        Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to
        corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the
        holistic world view of disruptive innovation via workplace diversity and empowerment.
      </p>
    </div>
  </div>
</div>

Angular

clrAlertClosable set to false. Default value is true.

<clr-alert [clrAlertClosable]="false">
  <clr-alert-item>
    <span class="alert-text">
      This alert cannot be dismissed.
    </span>
    <div class="alert-actions">
      <clr-dropdown>
        <button class="dropdown-toggle" clrDropdownTrigger>
          Actions
          <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu clrPosition="bottom-right">
          <a href="javascript:void(0)" class="dropdown-item" clrDropdownItem>Shutdown</a>
          <a href="javascript:void(0)" class="dropdown-item" clrDropdownItem>Delete</a>
          <a href="javascript:void(0)" class="dropdown-item" clrDropdownItem>Reboot</a>
        </clr-dropdown-menu>
      </clr-dropdown>
    </div>
  </clr-alert-item>
</clr-alert>
<clr-alert [clrAlertType]="'warning'">
  <clr-alert-item>
    <span class="alert-text">
      Try closing this alert.
    </span>
  </clr-alert-item>
</clr-alert>

clrAlertType set to alert-success. Default value is alert-info. Accepts values same as the static alert type classes.

<div class="main-container">
  <header class="header header-6">
    <div class="branding">
      <span class="title">Header</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <clr-alert [clrAlertType]="'success'">
        <clr-alert-item>
          <span class="alert-text">
            This alert indicates success.
          </span>
        </clr-alert-item>
      </clr-alert>
      <clr-alert>
        <clr-alert-item>
          <span class="alert-text">
            This is a default info alert.
          </span>
        </clr-alert-item>
      </clr-alert>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </p>
    </div>
  </div>
</div>

clrAlertSizeSmall set to true. Default value is false.

<div class="main-container">
  <header class="header header-6">
    <div class="branding">
      <span class="title">Header</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <clr-alert [clrAlertSizeSmall]="true">
        <clr-alert-item>
          <span class="alert-text">
            This is a small alert.
          </span>
        </clr-alert-item>
      </clr-alert>
      <clr-alert>
        <clr-alert-item>
          <span class="alert-text">
            This is a regular alert.
          </span>
        </clr-alert-item>
      </clr-alert>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </p>
    </div>
  </div>
</div>

Binding to the clrAlertClosedChange event.

<div class="main-container">
  <header class="header header-6">
    <div class="branding">
      <span class="title">Header</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <clr-alert [clrAlertType]="'success'" (clrAlertClosedChange)="onClose()">
        <clr-alert-item>
          <span class="alert-text">
            This alert indicates a success!
          </span>
        </clr-alert-item>
      </clr-alert>
      <div>{{closeMessage}}</div>
    </div>
  </div>
</div>

clrAlertAppLevel set to true. Default is false.

<div class="main-container">
  <clr-alert [clrAlertType]="'danger'" [clrAlertAppLevel]="true">
    <clr-alert-item>
      <span class="alert-text">
        This is an app level alert.
      </span>
      <div class="alert-actions">
        <button class="btn alert-action">Fix</button>
      </div>
    </clr-alert-item>
  </clr-alert>
  <header class="header header-6">
    <div class="branding">
      <span class="title">Header</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non beatae omnis esse quibusdam dolorum
        voluptatem reiciendis quaerat assumenda optio, porro expedita similique dolore quidem aliquam. Ullam, eaque enim
        nobis.
      </p>
    </div>
  </div>
</div>

Multiple app level alerts can be displayed with previous and next buttons.

<div class="main-container">
  <clr-alerts>
    <clr-alert [clrAlertType]="'info'" [clrAlertAppLevel]="true">
      <clr-alert-item>
        <span class="alert-text">
          View additional alerts using the pager
        </span>
        <div class="alert-actions">
          <button class="btn alert-action">Fix</button>
        </div>
      </clr-alert-item>
    </clr-alert>
    <clr-alert [clrAlertType]="'warning'" [clrAlertAppLevel]="true">
      <clr-alert-item>
        <span class="alert-text">
          Application level alerts should only be used for important messages.
        </span>
        <div class="alert-actions">
          <button class="btn alert-action">Fix</button>
        </div>
      </clr-alert-item>
    </clr-alert>
    <clr-alert [clrAlertType]="'danger'" [clrAlertAppLevel]="true">
      <div class="alert-item">
        <span class="alert-text">
          Don't add too many of these alerts!
        </span>
        <div class="alert-actions">
          <button class="btn alert-action">Fix</button>
        </div>
      </div>
    </clr-alert>
  </clr-alerts>
  <header class="header header-6">
    <div class="branding">
      <span class="title">Header</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non beatae omnis esse quibusdam dolorum
        voluptatem reiciendis quaerat assumenda optio, porro expedita similique dolore quidem aliquam. Ullam, eaque enim
        nobis.
      </p>
    </div>
  </div>
</div>

Accessibility

Actionable controls inside dynamically generated alerts are not accessible to screen reader users! For this reason Clarity does not recommend using dropdowns, buttons, links inside alerts that appear as dynamic notifications.

Accessibility problems related to using actionable controls inside dynamically generated alerts:

They are announced as part of the alert message, which is out of context and may be confusing. For example, the following alert will be announced as "success acknowledge": TODO Fix core components (maybe it cannot be used in the markdown rendering)
There is no way for the user to directly interact with the announced action controls.

It is acceptable to use actions in static alerts. The following guidelines are recommended:

Controls can be dropdown, button or link elements.
Buttons should be used for actions, links for navigation.
The text for these controls should be as descriptive as possible. Acknowledge Action Link