AlertMessage

Displays a styled alert banner with a background color determined by the type prop. Supports an optional leading icon, a dismissible close button, and a typewriter animation for the message text.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | message | string | Yes | — | The text content of the alert. | | type | 'primary' \| 'danger' \| 'warning' \| 'success' \| 'info' | No | 'primary' | Controls the background color of the alert. | | icon | string | No | — | Icon name to display on the left side of the message. | | dismissible | boolean | No | false | When true, shows a close button on the right. | | animateMessage | boolean | No | false | When true, the message appears with a typewriter effect. | | animationSpeed | number | No | 50 | Speed of the typewriter animation in milliseconds per character. | | onAnimationComplete | () => void | No | — | Callback fired when the typewriter animation finishes. | | onClose | () => void | No | — | Callback fired when the dismiss button is clicked. | | containerStyle | React.CSSProperties | No | — | Inline styles for the outer container. | | iconStyle | React.CSSProperties | No | — | Inline styles for the icon element. | | messageStyle | React.CSSProperties | No | — | Inline styles for the message text. |

Usage

Basic

import AlertMessage from '@/components/AlertMessage';

export default function Example() {
  return (
    <AlertMessage
      type="success"
      message="Your changes have been saved."
      icon="check"
    />
  );
}

Dismissible with callback

import { useState } from 'react';
import AlertMessage from '@/components/AlertMessage';

export default function Example() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <AlertMessage
      type="warning"
      message="Your session will expire in 5 minutes."
      icon="warning"
      dismissible
      onClose={() => setVisible(false)}
    />
  );
}

Animated message

import AlertMessage from '@/components/AlertMessage';

export default function Example() {
  return (
    <AlertMessage
      type="info"
      message="Welcome! Here is a tip to get you started."
      animateMessage
      animationSpeed={40}
      onAnimationComplete={() => console.log('Animation done')}
    />
  );
}