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

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

Information

This is an informational alert message.

<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.

Soft Info

This is the default soft variant with transparent background.

Soft Success

Subtle and non-intrusive style.

Soft Error

Easy on the eyes while still noticeable.

<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.

Solid Info

Full color background for high visibility.

Solid Success

Great for important notifications.

Solid Error

Impossible to miss critical alerts.

<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

Info

Solid info alert.

Success

Solid success alert.

Warning

Solid warning alert.

Destructive

Solid destructive alert.

Primary

Solid primary alert.

Secondary

Solid secondary alert.

Accent

Solid accent alert.

Contrast

Solid contrast alert.

<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.

Info

This is a info alert message.

Success

This is a success alert message.

Warning

This is a warning alert message.

Destructive

This is a destructive alert message.

Primary

This is a primary alert message.

Secondary

This is a secondary alert message.

Accent

This is a accent alert message.

Contrast

This is a contrast alert message.

<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.

3 errors found

• firstname - Invalid length: Expected >=5 but received 0
• lastname - Invalid length: Expected >=2 but received 0
• age - Invalid type: Expected number but received ""

<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".

Without border

This alert has no border.

With border (default)

This alert has a border.

<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.

Rounded: none

Customize the border radius.

Rounded: sm

Customize the border radius.

Rounded: md

Customize the border radius.

Rounded: lg

Customize the border radius.

Rounded: xl

Customize the border radius.

Rounded: 2xl

Customize the border radius.

Rounded: 3xl

Customize the border radius.

<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.

With icon (default)

The icon is visible.

Without icon

The icon is hidden.

<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.

Custom icon

This alert uses a custom icon.

<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.

Title only alert

Content only alert without a title.

Both title and content

This alert has both.

<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

Please fix the following errors:

• Email address is required
• Password must be at least 8 characters

<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

Payment successful!

Your order #12345 has been confirmed. You will receive an email confirmation shortly.

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

Warning message

Session expiring soon

Your session will expire in 5 minutes. Please save your work to avoid losing any changes.

<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>

Props

Name	Description	Type	Required	Default	Possible values
title	Title of the alert	string	No	-	-
content	Content of the alert	string	No	-	-
icon	Icon of the alert - can be a component or icon name string	string | IconComponent	No	-	-
hide-icon	Hide the icon	boolean	No	false	-
color	Color of the alert	MazAlertColor	No	"info"	'success' | 'warning' | 'destructive' | 'info' | 'primary' | 'secondary' | 'accent' | 'contrast'
icon-size	Size of the icon	MazIconSize	No	"md"	-
rounded-size	Size of the rounded corners	MazAlertRoundedSize	No	'md'	'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
bordered	Add border to the component	boolean	No	true	-
variant	Visual variant of the alert	MazAlertVariant	No	"soft"	'soft' | 'solid'

Slots

Name	Description	Bindings
title	Title slot - overrides title prop	-
default	Default slot for alert content - overrides content prop	-