Content
Alert
Alerts present important feedback. Use role="alert" for the visual component.
Default
<aside role="alert">
<h5>Default alert type</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa, amet..</p>
</aside>Error
Unknown error occurred
An unknown error occurred and your browser needs to restart.
<div role="alert" aria-label="error">
<h5>Unknown error occurred</h5>
<p>An unknown error occurred and your browser needs to restart.</p>
</div>Warning
<aside role="alert" aria-label="warning">
<h5>Last changes are unsaved</h5>
<p>Before closing the app remember to save changes. Otherwise you will lose all progress!</p>
</aside>Confirmation
<aside role="alert" aria-label="confirmation">
<h5>Transaction successful</h5>
</aside>Information
<aside role="alert" aria-label="information">
<h5>Dashboard system maintenance</h5>
<p>The dashboard system will be under maintenance at April 7th 2025 from 4:00PM to 8:00PM.</p>
</aside>