Go to main content
Version-1.3.0

Messages

Messages are used to display alerts inline.

When to use

  • Use alert for emergency communication purposes.
  • Alerts are used to get a user's attention and inform them about a required action.
  • An alert may be a notification that keeps users informed of the status of the current page. Such notifications may be errors, warnings, and general updates.
  • An alert may be a validation message that informs the user about an action that needs to be corrected or a confirmation that a task was completed successfully.
  • To provide contextual feedback messages for typical user actions.

Guidelines

  • Always keep alerts to just one line of text - keeping it short and to the point.
  • It will stay on the screen until the user either performs the action or closes the alert.

Basic

By default, each message includes an icon and text to help the user understand what the message is about.

<div class="alert alert-success" role="alert">                                  
  <i class="ds ds-user"></i>
  <strong class="me-2">Success</strong>
  Message Content                                    
</div>

Closable

Messages can be closed by clicking the close icon in the top right corner.

<div class="alert alert-success alert-dismissible fade show" role="alert">  
<div class="message-content">
  <i class="ds ds-checkmark"></i>
  <strong class="me-2">Success</strong>
  Closable Message Content
</div>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">                                  
<div class="message-content">
  <i class="ds ds-info-circle"></i>
  <strong class="me-2">Info</strong>
  Closable Message Content
  </div>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">                                  
<div class="message-content">
  <i class="ds ds-exclamation-triangle"></i>
  <strong class="me-2">Warning</strong>
  Closable Message Content
</div>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-error alert-dismissible fade show" role="alert">                                  
<div class="message-content">
<i class="ds ds-close-circle"></i>
  <strong class="me-2">Error</strong>
  Closable Message Content
  </div>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Accessibility

  • The role="alert" ARIA tag should be used. This role is used to communicate an important message to the user.
  • If the application wants the users to be able to close alert, include a close button and use the aria-label if using close icons.
  • Make sure all the components with the alert that are interactive have keyboard accessibility.
When to use Guidelines Basic Closable Accessibility
undefined