Alert
Alerts display brief messages for the user without interrupting their use of the app.
This is a success Alert.
<x-mbc::alert>This is a success Alert.</x-mbc::alert>Variants
Alerts can be displayed in three different variants: `standard`, `outlined`, and `filled`.
The default variant is `standard`
This is an `outlined` Alert.
This is a `filled` Alert.
<x-mbc::alert variant="standard">The default variant is `standard`</x-mbc::alert>
<x-mbc::alert variant="outlined">This is an `outlined` Alert.</x-mbc::alert>
<x-mbc::alert variant="filled">This is a `filled` Alert.</x-mbc::alert>Severities
The Alert component has four severities: success, info, warning, and
error.
This is a success Alert.
This is an info Alert.
This is a warning Alert.
This is an error Alert.
<x-mbc::alert severity="success">This is a success Alert.</x-mbc::alert>
<x-mbc::alert severity="info">This is an info Alert.</x-mbc::alert>
<x-mbc::alert severity="warning">This is a warning Alert.</x-mbc::alert>
<x-mbc::alert severity="error">This is an error Alert.</x-mbc::alert><x-mbc::alert severity="....">....</x-mbc::alert>Colors
Even though the Alert component has four severities, you can customize the color of the Alert component by using
the color attribute.
This is a `warning` colored Alert.
This is an `error` colored Alert.
This is a `#BADA55` colored Alert.
<x-mbc::alert color="warning">This is a <code>`warning`</code> colored Alert.</x-mbc::alert>
<x-mbc::alert color="error">This is an <code>`error`</code> colored Alert.</x-mbc::alert>
<x-mbc::alert color="#BADA55">This is a <code>`#BADA55`</code> colored Alert.</x-mbc::alert><x-mbc::alert color="....">....</x-mbc::alert>Icons
Same as the `color` prop, the `icon` prop can be used to display an icon on the left side of the Alert even though the Alert component has own icons for each severity.
This is a success Alert.
This is an info Alert.
This is a warning Alert.
<x-mbc::alert severity="success">This is a success Alert.</x-mbc::alert>
<x-mbc::alert severity="info">This is an info Alert.</x-mbc::alert>
<x-mbc::alert severity="warning">This is a warning Alert.</x-mbc::alert>
<x-mbc::alert severity="error">This is an error Alert.</x-mbc::alert>Properties
mbc::alert
| Name | Type | Default | Description |
|---|---|---|---|
children
|
string | html
|
|
Required. The content of the `mbc::alert`. |
color
|
ThemeColor | CssColor
|
|
The color of the component. It supports those theme colors that make sense for this component. |
icon
|
string
|
|
The icon to display. |
severity
|
'error' | 'info' | 'success' | 'warning'
|
success
|
The severity of the alert. |
variant
|
'filled' | 'outlined' | 'standard'
|
standard
|
The variant to use. |