Alert
Alerts display short, important messages to the user without interrupting their workflow.
Severity
This is an error alert — check it out!
This is a warning alert — check it out!
This is an info alert — check it out!
This is a success alert — check it out!
<me-alert severity="error">This is an error alert.</me-alert>
<me-alert severity="warning">This is a warning alert.</me-alert>
<me-alert severity="info">This is an info alert.</me-alert>
<me-alert severity="success">This is a success alert.</me-alert>
Filled Variant
This is a filled error alert.
This is a filled warning alert.
This is a filled info alert.
This is a filled success alert.
Outlined Variant
This is an outlined error alert.
This is an outlined warning alert.
This is an outlined info alert.
This is an outlined success alert.
With Title
Something went wrong — please try again.
Your changes have been saved.
<me-alert severity="error" title="Error">Something went wrong.</me-alert>
Closable
Click the ✕ button to dismiss. The alert fires a me-close event — your code removes it.
This alert can be dismissed.
This one has a title too.
<me-alert severity="info" closable>This alert can be dismissed.</me-alert>
<script>
document.querySelectorAll('me-alert[closable]').forEach(alert => {
alert.addEventListener('me-close', () => alert.remove());
});
</script>
API
| Attribute | Type | Default | Description |
|---|
severity | error | warning | info | success | info | Alert severity and icon. |
variant | standard | filled | outlined | standard | Visual style. |
title | string | — | Bold heading above the message. |
closable | boolean | false | Shows a dismiss button. |
Events
| Event | Description |
|---|
me-close | Fired when the close button is clicked. |
Slots
| Slot | Description |
|---|
| default | Alert message content. |
action | Optional action elements (e.g. buttons). |
