---
title: "MazAlert"
description: "MazAlert is an accessible component for displaying contextual feedback messages like success, warning, error, or informational notifications with customizable colors, icons, and styling options"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-alert"
---

# MazAlert

> MazAlert is an accessible component for displaying contextual feedback messages like success, warning, error, or informational notifications with customizable colors, icons, and styling options

- Package: `maz-ui`
- Import: `import MazAlert from 'maz-ui/components/MazAlert'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-alert

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

```vue
<template>
  <MazAlert title="Information" content="This is an informational alert message." />
</template>

<script lang="ts" setup>
  import MazAlert from 'maz-ui/components/MazAlert'
</script>
```

## Variants

MazAlert supports two visual variants: `soft` (default) with transparent background, and `solid` with full color background.

### Soft variant (default)

The soft variant uses a transparent background with colored text.

```vue
<template>
  <MazAlert color="info" variant="soft" title="Soft Info" content="..." />
  <MazAlert color="success" variant="soft" title="Soft Success" content="..." />
  <MazAlert color="destructive" variant="soft" title="Soft Error" content="..." />
</template>
```

### Solid variant

The solid variant uses the full color as background with contrasting text.

```vue
<template>
  <MazAlert color="info" variant="solid" title="Solid Info" content="..." />
  <MazAlert color="success" variant="solid" title="Solid Success" content="..." />
  <MazAlert color="destructive" variant="solid" title="Solid Error" content="..." />
</template>
```

### All colors with solid variant

```vue
<template>
  <MazAlert color="info" variant="solid" title="Info" content="..." />
  <MazAlert color="success" variant="solid" title="Success" content="..." />
  <MazAlert color="warning" variant="solid" title="Warning" content="..." />
  <MazAlert color="destructive" variant="solid" title="Error" content="..." />
  <!-- ... other colors -->
</template>
```

## Colors

MazAlert supports all theme colors to convey different types of messages.

```vue
<template>
  <MazAlert color="info" title="Info" content="This is an info alert." />
  <MazAlert color="success" title="Success" content="Operation completed successfully!" />
  <MazAlert color="warning" title="Warning" content="Please review before proceeding." />
  <MazAlert color="destructive" title="Error" content="An error occurred." />
  <MazAlert color="primary" title="Primary" content="This is a primary alert." />
  <MazAlert color="secondary" title="Secondary" content="This is a secondary alert." />
  <MazAlert color="accent" title="Accent" content="This is an accent alert." />
  <MazAlert color="contrast" title="Contrast" content="This is a contrast alert." />
</template>
```

## With slots

Use slots for more complex content with custom HTML.

```vue
<template>
  <MazAlert color="destructive">
    <template #title>
      3 errors found
    </template>
    <ul class="m-0 list-inside list-disc pl-0">
      <li>firstname - Invalid length: Expected >=5 but received 0</li>
      <li>lastname - Invalid length: Expected >=2 but received 0</li>
      <li>age - Invalid type: Expected number but received ""</li>
    </ul>
  </MazAlert>
</template>
```

## Without border

Remove the border with `:bordered="false"`.

```vue
<template>
  <MazAlert
    color="success"
    title="Without border"
    content="This alert has no border."
    :bordered="false"
  />

  <MazAlert
    color="success"
    title="With border (default)"
    content="This alert has a border."
  />
</template>
```

## Rounded sizes

Customize the border radius with the `rounded-size` prop.

```vue
<template>
  <MazAlert rounded-size="none" title="Rounded: none" content="..." />
  <MazAlert rounded-size="sm" title="Rounded: sm" content="..." />
  <MazAlert rounded-size="md" title="Rounded: md" content="..." />
  <MazAlert rounded-size="base" title="Rounded: base (default)" content="..." />
  <MazAlert rounded-size="lg" title="Rounded: lg" content="..." />
  <MazAlert rounded-size="xl" title="Rounded: xl" content="..." />
  <MazAlert rounded-size="2xl" title="Rounded: 2xl" content="..." />
  <MazAlert rounded-size="3xl" title="Rounded: 3xl" content="..." />
</template>
```

## Hide icon

Hide the default icon with `hide-icon`.

```vue
<template>
  <MazAlert color="warning" title="With icon (default)" content="The icon is visible." />
  <MazAlert color="warning" title="Without icon" content="The icon is hidden." hide-icon />
</template>
```

## Custom icon

Provide a custom icon using the `icon` prop.

```vue
<template>
  <MazAlert
    color="primary"
    title="Custom icon"
    content="This alert uses a custom icon."
    icon="/bell.svg"
  />
</template>
```

## Title only or content only

You can use either title, content, or both.

```vue
<template>
  <MazAlert color="info" title="Title only alert" />
  <MazAlert color="success" content="Content only alert without a title." />
  <MazAlert color="warning" title="Both title and content" content="This alert has both." />
</template>
```

## Use cases

### Form validation errors

```vue
<template>
  <MazAlert color="destructive" title="Please fix the following errors:">
    <ul class="m-0 list-inside list-disc pl-0">
      <li>Email address is required</li>
      <li>Password must be at least 8 characters</li>
    </ul>
  </MazAlert>
</template>
```

### Success notification

```vue
<template>
  <MazAlert
    color="success"
    title="Payment successful!"
    content="Your order #12345 has been confirmed. You will receive an email confirmation shortly."
  />
</template>
```

### Warning message

```vue
<template>
  <MazAlert
    color="warning"
    title="Session expiring soon"
    content="Your session will expire in 5 minutes. Please save your work to avoid losing any changes."
  />
</template>
```

## MazAlert API

`import MazAlert from 'maz-ui/components/MazAlert'`

### Props

- `title` (`string`): Title of the alert.
- `content` (`string`): Content of the alert.
- `icon` (`string | IconComponent`): Icon of the alert - can be a component or icon name string.
- `hide-icon` (`boolean`, default: `false`): Hide the icon.
- `color` (`MazAlertColor`, default: `"info"`): Color of the alert. Values: `'success'`, `'warning'`, `'destructive'`, `'info'`, `'primary'`, `'secondary'`, `'accent'`, `'contrast'` (non exhaustive).
- `icon-size` (`MazIconSize`, default: `"md"`): Size of the icon.
- `rounded-size` (`MazAlertRoundedSize`, default: `'md'`): Size of the rounded corners. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'` (non exhaustive).
- `bordered` (`boolean`, default: `true`): Add border to the component.
- `variant` (`MazAlertVariant`, default: `"soft"`): Visual variant of the alert. Values: `'soft'`, `'solid'` (non exhaustive).

### Slots

- `#title`: Title slot - overrides title prop
- `#default`: Default slot for alert content - overrides content prop