AlertBlock Component

Alert blocks are used to display important messages, warnings, or information to users with distinct visual styling.

Usage

<AlertBlock variant="warning">
  Your message here
</AlertBlock>

Props

Prop	Type	Default	Description
variant	String	info	The variant of the alert: info, warning, success, or danger

Variants

The AlertBlock component supports 4 different variants:

Info

This is an informational message. Use this variant to provide helpful context or additional details.

variant="info"

Warning

This is a warning message. Use this variant to alert users about potential issues or important notices.

variant="warning"

Success

This is a success message. Use this variant to confirm successful actions or positive outcomes.

variant="success"

Danger

This is a danger message. Use this variant for critical errors or destructive actions.

variant="danger"

Code Examples

Basic Usage

<template>
  <div>
    <AlertBlock variant="info">
      Your informational message here
    </AlertBlock>
    
    <AlertBlock variant="warning">
      Your warning message here
    </AlertBlock>
  </div>
</template>

With Complex Content

<template>
  <AlertBlock variant="warning">
    <div class="flex items-center gap-20px">
      <div class="flex-1">
        Your message with additional content
      </div>
      <div class="flex-shrink-0">
        <button class="btn color">Action</button>
      </div>
    </div>
  </AlertBlock>
</template>

Real-World Examples

File Upload Warning

Your music and files will be reviewed by our team. Please read the Upload Guide carefully before submitting.

Important Notice

Even if you don't wish to offer your project file for sale, you still need to upload it for verification.

Our team uses this to ensure everything is in order.