Alert

Overview

Alerts communicate important information to users. They can be used to display status updates, warnings, validation messages, errors, and success feedback. MiniKit provides semantic alert variants that help communicate intent while maintaining a consistent appearance across your application.

Basic Usage

Create an alert using the role="alert" attribute.

<div role="alert">
  This is a default alert.
</div>

Variants

Alerts support multiple variants for communicating different types of information.

Success

<div role="alert" data-variant="success">
  Changes saved successfully.
</div>

Warning

<div role="alert" data-variant="warning">
  Please review your input before continuing.
</div>

Danger

<div role="alert" data-variant="danger">
  Something went wrong.
</div>

Accessibility

MiniKit styles the native role="alert" pattern without modifying its behavior. Alerts are announced automatically by assistive technologies when they are inserted into the page.

• Uses the standard role="alert" accessibility pattern.
• Messages are announced automatically by screen readers.
• Icons, if used, should be marked as decorative unless they convey additional meaning.
• Do not rely on color alone—always provide clear descriptive text.
• Use alerts for important, time-sensitive information. For non-urgent messages, consider a less intrusive pattern.

API