Alert
Available since 1.0.0 Last updated 1.6.0
Alerts provide messages within the application that are color-coded to emphasize the level of urgency.
For Alert placement guidelines within the application, see Application Layout page and Application Alerts overlay Demo Page
Default Alert
The alert provides information that is useful and relevant, but not critical. It can also provide feedback that an action has been executed. In most cases, the user should be able to dismiss the message so include the modifier class fd-alert--dismissible and include the close button.
<div class="fd-alert fd-alert--dismissible" role="alert" id="ZvPBg609" >
<button class="fd-alert__close" aria-controls="ZvPBg609" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et mattis erat vel aliquet in sem urna et sagittis diam in vehicula. <a href="#" class="fd-link">Learn More</a>
</div>
<br>Information
Add the modifier class fd-alert--information for Information alert.
<div class="fd-alert fd-alert--information fd-alert--dismissible" role="alert" id="JwPcf464" >
<button class="fd-alert__close" aria-controls="JwPcf464" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. <a href="#" class="fd-link">Learn More</a>
</div>
<br>Success
Add the modifier class fd-alert--success for Success alert.
<div class="fd-alert fd-alert--success fd-alert--dismissible" role="alert" id="ulr5z216">
<button class="fd-alert__close" aria-controls="ulr5z216" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</div>Warning
The alert warns of potential issues, but the user can still continue. The user will need to dismiss the message.
Add the modifier class fd-alert--warning for Warning alert.
<div class="fd-alert fd-alert--warning fd-alert--dismissible" role="alert" id="fwYq4606">
<button class="fd-alert__close" aria-controls="fwYq4606" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</div>Error
This alert is triggered after the user entered data incorrectly or a system error has occurred. It should interrupt the user. A final action such as Submit cannot be carried out until the user has rectified the error. The user will need to dismiss the message.
Add the modifier class fd-alert--error for Error alert.
<div class="fd-alert fd-alert--error fd-alert--dismissible" role="alert" id="SsoiW591">
<button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</div>No Icons
Add the modifier class fd-alert--no-icon to render alert without any icon
<div class="fd-alert fd-alert--information fd-alert--no-icon fd-alert--dismissible"
role="alert" id="SsoiW591">
<button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</div>
<div class="fd-alert fd-alert--success fd-alert--no-icon fd-alert--dismissible"
role="alert" id="SsoiW591">
<button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</div>
<div class="fd-alert fd-alert--warning fd-alert--no-icon fd-alert--dismissible"
role="alert" id="SsoiW591">
<button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</div>
<div class="fd-alert fd-alert--error fd-alert--no-icon fd-alert--dismissible"
role="alert" id="SsoiW591">
<button class="fd-alert__close" aria-controls="SsoiW591" aria-label="Close"></button>
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
</div>Right to left support
If right to left text direction is provided, the dismiss button moves to left side.
<div class="fd-alert fd-alert--error fd-alert--dismissible" role="alert" id="BQ6WP516" dir="rtl">
<button class="fd-alert__close" aria-controls="BQ6WP516" aria-label="Close"></button>
حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانيأسي.
</div>