Alert

Alerts display brief messages for the user without interrupting their use of the app.

check_circle

This is a success Alert.

<x-mbc::alert>This is a success Alert.</x-mbc::alert>

Variants link

Alerts can be displayed in three different variants: `standard`, `outlined`, and `filled`.

check_circle

The default variant is `standard`

check_circle

This is an `outlined` Alert.

check_circle

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 link

The Alert component has four severities: success, info, warning, and error.

check_circle

This is a success Alert.

info

This is an info Alert.

warning

This is a warning Alert.

error

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 link

Even though the Alert component has four severities, you can customize the color of the Alert component by using the color attribute.

check_circle

This is a `warning` colored Alert.

check_circle

This is an `error` colored Alert.

check_circle

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 link

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.

local_pizza

This is a success Alert.

local_pizza

This is an info Alert.

local_pizza

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>

Elevation link

The elevation attribute controls the Material Design elevation shadow of the alert. Elevation values range from 0 to 24, with higher values creating deeper shadows.

check_circle

Elevation 0 - No shadow (default)

check_circle

Elevation 4 - Subtle shadow

check_circle

Elevation 8 - Medium shadow

info

Elevation 16 - Deep shadow

warning

Elevation 24 - Maximum shadow

<!-- Elevation ranges from 0 (no shadow) to 24 (maximum shadow) -->

<x-mbc::alert elevation="0" variant="outlined">
    Elevation 0 - No shadow (default)
</x-mbc::alert>

<x-mbc::alert elevation="4" variant="outlined">
    Elevation 4 - Subtle shadow
</x-mbc::alert>

<x-mbc::alert elevation="8" variant="outlined">
    Elevation 8 - Medium shadow
</x-mbc::alert>

<x-mbc::alert elevation="16" variant="outlined" severity="info">
    Elevation 16 - Deep shadow
</x-mbc::alert>

<x-mbc::alert elevation="24" variant="outlined" severity="warning">
    Elevation 24 - Maximum shadow
</x-mbc::alert>

<!-- Elevation can be combined with any variant, severity, or color -->
<x-mbc::alert elevation="6" variant="filled" severity="error">
    Filled alert with elevation
</x-mbc::alert>

<x-mbc::alert elevation="8" variant="standard" color="purple">
    Custom colored alert with elevation
</x-mbc::alert>

<x-mbc::alert elevation="0">No shadow</x-mbc::alert>
<x-mbc::alert elevation="4">Subtle shadow</x-mbc::alert>
<x-mbc::alert elevation="8">Medium shadow</x-mbc::alert>

Elevation works with all variants and can be combined with different severities and colors to create visually distinct alerts.

Properties link

mbc::alert link

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.
`elevation`	`int`	`0`	Material Design elevation level (0-24). Higher values create deeper shadows.
`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.

References link

Edit this page