Alert

Alert is a notification component that displays a status message with an optional action button.

Props

Prop	Type	Default	Description
title	string	'Alert Title'	The main title text of the alert
subtitle	string	'This is the alert description'	The subtitle or description text
buttonLabel	string	'Action'	The label text for the action button

Events

Event	Payload	Description
button-click	none	Emitted when the action button is clicked

Basic Usage

Default Alert

Alert TitleThis is the alert description

<Alert />

Custom Alert with Props

Custom AlertThis is a custom message

<Alert
  title="Custom Alert"
  subtitle="This is a custom message"
  button-label="Learn More"
  @button-click="handleAlertAction"
/>

Alert with Event Handling

Warning AlertPlease review the information before proceeding

<template>
  <Alert
    title="Warning Alert"
    subtitle="Please review the information before proceeding"
    button-label="Review"
    @button-click="handleReview"
  />
</template>

<script setup>
const handleReview = () => {
  // Handle the review action
  console.log('Review button clicked!')
}
</script>

Customization

The Alert component includes:

• Status Indicator: A pulsing dot with warning icon that indicates the alert status
• Title and Subtitle: Customizable text content for the alert message
• Action Button: An optional button that emits a button-click event when clicked