Added in v1.1

Alerts

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

Overview

Component types

Alert message is a prominent, persistent and actionable communication component to display system feedback, status change or required action.
Inline alert is a prominent and persistent component displayed in the content flow to display system feedback or status change.

For both types of alert, OUDS Web has a common basic .alert class that sets up default styles.

Alert message

 <div class="alert alert-message alert-negative">
  <div class="alert-icon"><p class="visually-hidden">Negative alert</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <h3 class="alert-label">Alert message</h3>
    </div>
  </div>
</div> 

Label

 <div class="alert alert-info">
  <div class="alert-icon"><p class="visually-hidden">Positive alert</p></div>
  <p class="alert-label">Label</p>
</div> 

Approach

Alerts are built on .alert class. They contain texts such as label, icons, and may also contain actions or close buttons.

.alert-label is used to display the title in all alerts. Note that this one is mandatory.

.alert-icon is used to display the icon in all alerts.

Alert messages come with additional layout classes such as .alert-container, .alert-text-container and .alert-action-container to help building some alerts’ variants.

.alert-container is used to align content inside the alert message correctly.

.alert-text-container is to vertically distribute all the textual content of the alert message.

.alert-action-container is mainly useful when there is an action next to a close button in alert message.

.alert-close-container is only useful when there are rounded corner alerts, with a title on one line, in order to help to round the .btn-close automatically. If present, this element should only wrap the .btn-close button.

Accessibility

Semantics

For accessibility reasons, any textual element must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the alert texts appear as <p> or <hn> elements but adapt the semantic to your context of use. In this documentation, you’ll have several different examples.

For instance there is no need to have a title element if the alert doesn’t have any description or other element inside.

Information for visually impaired users

Keep in mind that visually impaired and blind users will lack the visual context (color and icons for instance) that permits to understand the alerts purpose on the page. If alerts’ titles are not self-explanatory, it’s mandatory to add a .visually-hidden information to explain what it represents.

Several examples are provided below, but they need to be adapted for actual use cases.

Close buttons should be labelled:

Either via a <span class="visually-hidden"> and a descriptive text inside to know what the associated action is. (Preferred method)
Or via aria-labelledby referencing the action performed by the button and the id of the title of the alert.
Or via aria-label and a descriptive text inside to know what the associated action is.

Dynamic behavior

In case an alert is dynamically added, there are several use cases:

The alert is only informational and/or can be accessed in a different way, there is no need for a particular role or vocalization.
The alert is informational and needs a user action but isn’t urgent, you can make it appear inside a <div role="status">. The dynamic alert message should reference where to find this action. More information about the role="status". See a valid example.
The alert requires a user action, either add the role="alert" directly on the <div class="alert" role="alert"> and add a way to access to it easily, or, focus the newly added alert and once it’s closed, give the focus back to the element that triggered the alert. If the second choice is applied here, you may want to add a focustrap to this alert. More information about the role="alert".

In case an alert is closed and the focus haven’t been customized, the focus order should stay the same.

Alert message

Alert message is a UI element that displays system feedback, status changes or required action; throughout detailed, prominent, persistent and actionable communication.

To have an alert message, add .alert-message at the .alert level to display an alert message.

Variants

Status and appearance

Alert message holds status depending on the context of the information they represent. Each status is designed to convey a specific meaning.

Functional

Functional alert message communicates specific system statuses, results, or user feedback.

Each variant conveys a clear semantic meaning — such as positive, warning, info, or negative — and must always be paired with its dedicated functional icon to ensure clarity and accessibility.

Other icons should not be substituted, as the semantic pairing between icon, colour, and message is essential for recognition and consistency.

Use functional alerts to inform users about state changes, confirmations, or issues that are directly connected to system logic or user actions. These messages carry functional meaning and help guide user response or acknowledgment.

Heads up!

Keep in mind that color should not be the only way to convey information. If the color has a strong meaning, reflect it in the alert message’s text and if necessary add additional text with the class .visually-hidden. Read more about alert message accessibility here.

Please note that you shouldn’t add any icon in those alert messages.

The variants .alert-negative, .alert-positive, .alert-info and .alert-warning are considered as functional.

Connection failed.

Your payment has been successfully received.

We’re processing your request.

Your data allowance is running low.

 <div class="alert alert-message alert-negative">
  <div class="alert-icon"><p class="visually-hidden">Error</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Connection failed.</p>
    </div>
  </div>
</div>

<div class="alert alert-message alert-positive">
  <div class="alert-icon"></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Your payment has been successfully received.</p>
    </div>
  </div>
</div>

<div class="alert alert-message alert-info">
  <div class="alert-icon"></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">We’re processing your request.</p>
    </div>
  </div>
</div>

<div class="alert alert-message alert-warning">
  <div class="alert-icon"><p class="visually-hidden">Be careful, </p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Your data allowance is running low.</p>
    </div>
  </div>
</div> 

html

Bootstrap $enable-bootstrap-compatibility: true

Note

This part is enabled only when $enable-bootstrap-compatibility is set to true.

Non-functional

Non-functional alerts are informative or decorative. They provide context or highlight content without implying a specific state, system event, or user action. These alerts are not tied to UX patterns such as positive, negative, info, or warning, and may use contextual or brand-related icons to enhance recognition or storytelling.

The variants alert neutral (default) and .alert-accent are considered as non-functional.

Your data plan includes free calls on weekends.

Upgrade your plan and get a free device.

 <div class="alert alert-message">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <p class="visually-hidden">Emphasized content</p>
  </div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Your data plan includes free calls on weekends.</p>
    </div>
  </div>
</div>

<div class="alert alert-message alert-accent">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <p class="visually-hidden">Emphasized content</p>
  </div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Upgrade your plan and get a free device.</p>
    </div>
  </div>
</div> 

html

Bootstrap $enable-bootstrap-compatibility: true

Note

This part is enabled only when $enable-bootstrap-compatibility is set to true.

Icon

For non-functional alert messages, the displayed icon can be customized.

This can be achieved by using one of the following solutions:

adding a <svg>, <img> or an .icon inside the .alert-icon container.
applying a mask-image on .alert-icon with a class or an inline style attribute.
setting the custom property --bs-alert-icon inside the .alert.

In any case, the icon will be colorized automatically via the color attribute.

Note

The recommended way to use icons is to fill an SVG sprite file, and use currentColor for styling. If really necessary, for example when you have a lot of icons, you can use an icon font. Find out more about using icons.

Your data plan includes free calls on weekends.

Upgrade your plan and get a free device.

Your data plan includes free calls on weekends.

 <div class="alert alert-message">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <p class="visually-hidden">Emphasized content</p>
  </div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Your data plan includes free calls on weekends.</p>
    </div>
  </div>
</div>

<div class="alert alert-message alert-accent" style="--bs-alert-icon: url(&#34;data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M15.474 9.514 10 15.577 4.526 9.514l-.002-.003A2.868 2.868 0 0 1 8.69 5.572l.838.796.472.455.472-.455.838-.796.008-.008a2.868 2.868 0 0 1 4.159 3.947l-.003.003Zm1.251-5.302A4.78 4.78 0 0 0 10 4.18a4.78 4.78 0 0 0-6.815 6.7L10 18.393l6.815-7.514a4.78 4.78 0 0 0-.09-6.667Z'/></svg>&#34;)">
  <div class="alert-icon"><p class="visually-hidden">Emphasized content</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Upgrade your plan and get a free device.</p>
    </div>
  </div>
</div>

<div class="alert alert-message">
  <div class="alert-icon">
    <span class="icon si si-settings" aria-hidden="true"></span>
    <p class="visually-hidden">Emphasized content</p>
  </div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Your data plan includes free calls on weekends.</p>
    </div>
  </div>
</div> 

html

Optionally, for the non-functional alert message, you can remove the .alert-icon container.

Heads up!

Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Emphasized content: Your data plan includes free calls on weekends.

Emphasized content: Upgrade your plan and get a free device.

 <div class="alert alert-message">
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label"><span class="visually-hidden">Emphasized content: </span>Your data plan includes free calls on weekends.</p>
    </div>
  </div>
</div>

<div class="alert alert-message alert-accent">
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label"><span class="visually-hidden">Emphasized content: </span>Upgrade your plan and get a free device.</p>
    </div>
  </div>
</div> 

html

Rounded

Rounded corners alerts is a project-wide option therefore all your alerts should either be rounded or not. Add .use-rounded-corner-alert on a top container (for example <body>) to use rounded corners.

Heads up!

Rounded corners could be used in more emotional, immersive contexts or those tied to specific visual identities. For standard or business-oriented usage, keep the default square corners.

Note

We use a <div> as a parent container because we cannot use <body> in an example.

Your data plan includes free calls on weekends.

Your payment has been successfully received.

 <div class="use-rounded-corner-alert">
  <div class="alert alert-message mb-medium">
    <div class="alert-icon">
      <svg aria-hidden="true">
        <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
      </svg>
      <p class="visually-hidden">Emphasized content</p>
    </div>
    <div class="alert-container">
      <div class="alert-text-container">
        <p class="alert-label">Your data plan includes free calls on weekends.</p>
      </div>
    </div>
  </div>

  <div class="alert alert-message alert-positive">
    <div class="alert-icon"></div>
    <div class="alert-container">
      <div class="alert-text-container">
        <p class="alert-label">Your payment has been successfully received.</p>
      </div>
    </div>
  </div>
</div> 

html

Close button

If the alert can be removed when its content is acknowledged, add a close button inside the .alert-action-container with our button icon.

Note

If you want the JavaScript behavior presented on the first alert below, please refer to our JavaScript section.

One line title alert

If you have a one line title-only .alert-message and you are using a rounded alert (that might happen in our documentation depending on the brand), you can wrap the .btn-close with an element holding .alert-close-container class to prevent issues with the rounded button. See it in action in our live example.

Heads up!

For accessibility purpose, please provide a meaningful label for the close button. For example, adding an aria-labelledby linking to the title of the alert, or adding a .visually-hidden content.

Accent alert

Info alert

 <div class="alert alert-message alert-accent">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
  </div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label" id="closable-alert-accent">Accent alert</p>
    </div>
  </div>
  <div class="alert-action-container">
    <div class="alert-close-container">
      <button class="btn-close" data-bs-dismiss="alert" aria-labelledby="btn-close-alert closable-alert-accent" id="btn-close-alert">
        <span class="visually-hidden">Close</span>
      </button>
    </div>
  </div>
</div>

<div class="alert alert-message alert-info">
  <div class="alert-icon"><p class="visually-hidden">Info alert</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Info alert</p>
    </div>
  </div>
  <div class="alert-action-container">
    <div class="alert-close-container">
      <button class="btn-close" data-bs-dismiss="alert">
        <span class="visually-hidden">Close info alert</span>
      </button>
    </div>
  </div>
</div> 

html

With action

You can add an action link (<a> or <button depending on the context of use) either after the .alert-text-container or inside the .alert-action-container.

Heads up!

Please note that only the basic link should be used.

Info alert

Action

Info alert

Action

 <div class="alert alert-message alert-info">
  <div class="alert-icon"><p class="visually-hidden">Info alert</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Info alert</p>
    </div>
    <button class="link">Action</button>
  </div>
  <div class="alert-action-container">
    <button class="btn-close" data-bs-dismiss="alert">
      <span class="visually-hidden">Close info alert</span>
    </button>
  </div>
</div>

<div class="alert alert-message alert-info">
  <div class="alert-icon"><p class="visually-hidden">Info alert</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Info alert</p>
    </div>
  </div>
  <div class="alert-action-container">
    <button class="link">Action</button>
    <div class="alert-close-container">
      <button class="btn-close" data-bs-dismiss="alert">
        <span class="visually-hidden">Close info alert</span>
      </button>
    </div>
  </div>
</div>

<div class="alert alert-message alert-info">
  <div class="alert-icon"><p class="visually-hidden">Info alert</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Info alert</p>
    </div>
    <a href="#" class="link">Action</a>
  </div>
  <div class="alert-action-container">
    <button class="btn-close" data-bs-dismiss="alert">
      <span class="visually-hidden">Close info alert</span>
    </button>
  </div>
</div>

<div class="alert alert-message alert-info">
  <div class="alert-icon"><p class="visually-hidden">Info alert</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <p class="alert-label">Info alert</p>
    </div>
  </div>
  <div class="alert-action-container">
    <a href="#" class="link">Action</a>
    <div class="alert-close-container">
      <button class="btn-close" data-bs-dismiss="alert">
        <span class="visually-hidden">Close info alert</span>
      </button>
    </div>
  </div>
</div> 

html

Description

To display a description text below the alert label, add a <p> after .alert-label.

Label

Description

 <div class="alert alert-message">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
  </div>
  <div class="alert-container">
    <div class="alert-text-container">
      <h5 class="alert-label">Label</h5>
      <p>Description</p>
    </div>
  </div>
</div> 

html

With bullet list

To display a bullet list below the alert label, add an <ul> after .alert-label.

Label

Bullet text
Bullet text
Bullet text

 <div class="alert alert-message">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
  </div>
  <div class="alert-container">
    <div class="alert-text-container">
      <h5 class="alert-label">Label</h5>
      <ul>
        <li>Bullet text</li>
        <li>Bullet text</li>
        <li>Bullet text</li>
      </ul>
    </div>
  </div>
</div> 

html

Layout

Here are some examples with everything activated and some long texts to see how it should behave. Please note that a max-width limit is applied on the texts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis. Aliquam erat volutpat. Ut quam turpis, interdum non ex at, imperdiet ornare mi. Curabitur eget hendrerit diam. Curabitur id placerat ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis. Aliquam erat volutpat. Ut quam turpis, interdum non ex at, imperdiet ornare mi. Curabitur eget hendrerit diam. Curabitur id placerat ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis.

Action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis. Aliquam erat volutpat. Ut quam turpis, interdum non ex at, imperdiet ornare mi. Curabitur eget hendrerit diam. Curabitur id placerat ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis.

 <div class="alert alert-message alert-warning">
  <div class="alert-icon"><p class="visually-hidden">Warning alert</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <h4 class="alert-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem.</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis. Aliquam erat volutpat. Ut quam turpis, interdum non ex at, imperdiet ornare mi. Curabitur eget hendrerit diam. Curabitur id placerat ipsum.</p>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis. Aliquam erat volutpat. Ut quam turpis, interdum non ex at, imperdiet ornare mi. Curabitur eget hendrerit diam. Curabitur id placerat ipsum.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis.</li>
      </ul>
    </div>
    <a href="#" class="link">Action</a>
  </div>
  <div class="alert-action-container">
    <button class="btn-close" data-bs-dismiss="alert">
      <span class="visually-hidden">Close warning alert</span>
    </button>
  </div>
</div>

<div class="alert alert-message alert-positive">
  <div class="alert-icon"><p class="visually-hidden">Positive alert</p></div>
  <div class="alert-container">
    <div class="alert-text-container">
      <h4 class="alert-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem.</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis. Aliquam erat volutpat. Ut quam turpis, interdum non ex at, imperdiet ornare mi. Curabitur eget hendrerit diam. Curabitur id placerat ipsum.</p>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis. Aliquam erat volutpat. Ut quam turpis, interdum non ex at, imperdiet ornare mi. Curabitur eget hendrerit diam. Curabitur id placerat ipsum.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem. Aenean posuere elementum massa, ac elementum magna auctor quis.</li>
      </ul>
    </div>
  </div>
  <div class="alert-action-container">
    <button class="link">Action</button>
    <button class="btn-close" data-bs-dismiss="alert">
      <span class="visually-hidden">Close positive alert</span>
    </button>
  </div>
</div> 

html

JavaScript

Using the alert plugin, it’s possible to dismiss any alert message, here’s how:

Be sure you’ve loaded the alert plugin, or the compiled OUDS Web JavaScript.
Add a close button using a <button> element.
On this close button, add the data-bs-dismiss="alert" attribute which triggers the JavaScript functionality.

Live example

Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.

Note

We use .use-rounded-corner-alert here to detect edge cases.

Your payment has been successfully received.

 <div id="liveAlertPlaceholder" role="status" class="use-rounded-corner-alert d-flex flex-column gap-medium mb-medium">
  <div class="alert alert-message alert-positive">
    <div class="alert-icon"></div>
    <div class="alert-container">
      <div class="alert-text-container">
        <p class="alert-label">Your payment has been successfully received.</p>
      </div>
    </div>
    <div class="alert-action-container">
      <div class="alert-close-container">
        <button class="btn-close" data-bs-dismiss="alert">
          <span class="visually-hidden">Close alert</span>
        </button>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-brand" id="liveAlertBtn">Add live alert <span class="visually-hidden">just before this button</span></button> 

html

We use the following JavaScript to trigger our live alert demo:

  site/src/assets/partials/snippets.js  
 function appendAlert(message, type, typeVisuallyHidden) {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-message alert-${type}" ${type === 'negative' ? 'role="alert"' : ''}>`,
    '  <div class="alert-icon">',
    `    <p class="visually-hidden">${typeVisuallyHidden} alert</p>`,
    '  </div>',
    '  <div class="alert-container">',
    '    <div class= "alert-text-container">',
    `      <h5 class="alert-label">${message}</h5>`,
    '      <p>This is a small paragraph.</p>',
    '    </div>',
    '  </div>',
    '  <div class="alert-action-container">',
    '    <div class="alert-close-container">',
    '      <button class="btn-close" data-bs-dismiss="alert">',
    `        <span class="visually-hidden">Close ${type} alert</span>`,
    '      </button>',
    '    </div>',
    '  </div>',
    '</div>'
  ].join('')

  document.getElementById('liveAlertPlaceholder').append(wrapper.firstChild)
}

if (document.getElementById('liveAlertBtn')) {
  const functionalArray = ['positive', 'negative', 'info', 'warning']
  document.getElementById('liveAlertBtn').addEventListener('click', () => {
    const type = functionalArray[Math.floor(Math.random() * functionalArray.length)]
    appendAlert(`Nice, you triggered this ${type} alert message!`, type, type)
  })
}
 
  

Initialize

Initialize elements as alerts.

 const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new oudsWeb.Alert(element))

Note

For the sole purpose of dismissing an alert, it isn’t necessary to initialize the component manually via the JS API, unless you want to use one of our methods. By making use of data-bs-dismiss="alert", the component will be initialized automatically and properly dismissed.

See the triggers section for more details.

Triggers

Dismissal can be achieved with the data-bs-dismiss attribute on a button within the alert as demonstrated below:

 <button class="btn btn-icon btn-minimal" data-bs-dismiss="alert">
  <svg aria-hidden="true"><use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#expurge"/></svg>
  <span class="visually-hidden">Close</span>
</button> 
  

or on a button outside the alert using the additional data-bs-target as demonstrated below:

 <button class="btn btn-icon btn-minimal" data-bs-dismiss="alert" data-bs-target="#my-alert">
  <svg aria-hidden="true"><use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#expurge"/></svg>
  <span class="visually-hidden">Close</span>
</button> 
  

Note that closing an alert will remove it from the DOM.

Methods

You can create an alert instance with the alert constructor, for example:

 const bsAlert = new oudsWeb.Alert('#myAlert')
 
  

This makes an alert listen for click events on descendant elements which have the data-bs-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)

Method	Description
`close`	Closes an alert by removing it from the DOM.
`dispose`	Destroys an element’s alert. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element. For example: `oudsWeb.Alert.getInstance(alert)`.
`getOrCreateInstance`	Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `oudsWeb.Alert.getOrCreateInstance(element)`.

Basic usage:

 const alert = oudsWeb.Alert.getOrCreateInstance('#myAlert')
alert.close()

Events

OUDS Web’s alert plugin exposes a few events for hooking into alert functionality.

Event	Description
`close.bs.alert`	Fires immediately when the `close` instance method is called.
`closed.bs.alert`	Fired when the alert has been closed and CSS transitions have completed.

 const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn’t get lost/reset to the start of the page
  // document.getElementById('...').focus()
})
 
  

Inline alert

Inline alert is a lightweight UI element, placed in the content flow, that displays information, system feedback, status changes throughout short, prominent, persistent and non actionable communication.

There is no specific class for inline alert, the .alert class is used standalone here.

Variants

Status and appearance

Inline alert holds status depending on the context of the information they represent. Each status is designed to convey a specific meaning.

Functional

Functional inline alert communicates specific system statuses, or system feedback.

Each variant conveys a clear semantic meaning — such as positive, warning, info, or negative — and must always be paired with its dedicated functional icon to ensure clarity and accessibility.

Other icons should not be substituted, as the semantic pairing between icon, colour, and message is essential for recognition and consistency.

Use functional inline alerts to inform users about state changes, or issues that are directly connected to system logic. These messages carry functional meaning and help guide user response or acknowledgment.

Heads up!

Keep in mind that color should not be the only way to convey information. If the color has a strong meaning, reflect it in the inline alert’s text and if necessary add additional text with the class .visually-hidden. Read more about inline alert accessibility here.

Please note that you shouldn’t add any icon in those inline alerts.

The variants .alert-negative, .alert-positive, .alert-info and .alert-warning are considered as functional.

Connection failed.

Your payment has been successfully received.

We’re processing your request.

Be careful, Your data allowance is running low.

 <div class="alert alert-negative">
  <div class="alert-icon"><p class="visually-hidden">Error</p></div>
  <p class="alert-label">Connection failed.</p>
</div>

<div class="alert alert-positive">
  <div class="alert-icon"></div>
  <p class="alert-label">Your payment has been successfully received.</p>
</div>

<div class="alert alert-info">
  <div class="alert-icon"></div>
  <p class="alert-label">We’re processing your request.</p>
</div>

<div class="alert alert-warning">
  <div class="alert-icon"></div>
  <p class="alert-label"><span class="visually-hidden">Be careful, </span>Your data allowance is running low.</p>
</div> 

html

Non-functional

The variants alert neutral (default) and .alert-accent are considered as non-functional.

Please note that this variant of alert needs an icon specified.

Your data plan includes free calls on weekends.

Upgrade your plan and get a free device.

 <div class="alert">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <p class="visually-hidden">Emphasized content</p>
  </div>
  <p class="alert-label">Your data plan includes free calls on weekends.</p>
</div>

<div class="alert alert-accent">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <p class="visually-hidden">Emphasized content</p>
  </div>
  <p class="alert-label">Upgrade your plan and get a free device.</p>
</div> 

html

Icon

For non-functional alert messages, the displayed icon can be customized.

This can be achieved by using one of the following solutions:

adding a <svg>, <img> or an .icon inside the .alert-icon container.
applying a mask-image on .alert-icon with a class or an inline style attribute.
setting the custom property --bs-alert-icon inside the .alert.

In any case, the icon will be colorized automatically via the color attribute.

Note

Your data plan includes free calls on weekends.

Upgrade your plan and get a free device.

Your data plan includes free calls on weekends.

 <div class="alert">
  <div class="alert-icon">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <p class="visually-hidden">Emphasized content</p>
  </div>
  <p class="alert-label">Your data plan includes free calls on weekends.</p>
</div>

<div class="alert alert-accent" style="--bs-alert-icon: url(&#34;data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M15.474 9.514 10 15.577 4.526 9.514l-.002-.003A2.868 2.868 0 0 1 8.69 5.572l.838.796.472.455.472-.455.838-.796.008-.008a2.868 2.868 0 0 1 4.159 3.947l-.003.003Zm1.251-5.302A4.78 4.78 0 0 0 10 4.18a4.78 4.78 0 0 0-6.815 6.7L10 18.393l6.815-7.514a4.78 4.78 0 0 0-.09-6.667Z'/></svg>&#34;)">
  <div class="alert-icon"><p class="visually-hidden">Emphasized content</p></div>
  <p class="alert-label">Upgrade your plan and get a free device.</p>
</div>

<div class="alert">
  <div class="alert-icon">
    <span class="icon si si-settings" aria-hidden="true"></span>
    <p class="visually-hidden">Emphasized content</p>
  </div>
  <p class="alert-label">Your data plan includes free calls on weekends.</p>
</div> 

html

Alerts

On this page On this page

Overview

Component types

Alert message

Approach

Accessibility

Semantics

Information for visually impaired users

Dynamic behavior

Alert message

Variants

Status and appearance

Functional

Non-functional

Icon

Rounded

Close button

With action

Description

Label

With bullet list

Label

Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus et risus consectetur dignissim volutpat ut lorem.

JavaScript

Live example

Initialize

Triggers

Methods

Events

Inline alert

Variants

Status and appearance

Functional

Non-functional

Icon

On this page