Skip to main content
ninna-ui

Alert

Display important messages and notifications to users with various styles and colors.

import { Alert } from "@ninna-ui/feedback"
pnpm add @ninna-ui/feedback

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Alert component in your application.

import { Alert } from "@ninna-ui/feedback";


export default function Example() {
  return (
    <Alert
      color="success"
      title="Success!"
      description="Your changes have been saved."
    />
  );
}

Solid

Alerts with solid background colors for high emphasis.

Soft

Alerts with light tinted backgrounds for subtle emphasis.

Outline

Alerts with transparent background and colored border.

Dismissible

Alerts that can be dismissed by the user.

With Icon

Alerts with custom icons or without icons.

With Action

Alerts with action buttons for user interaction.

Use Cases

Real-world alert usage examples.

Form Validation

Success Message

System Notification

Warning Banner

Cookie Consent

API Reference

Complete list of props for the Alert component.

Props

PropTypeDefaultDescription
variant'solid' | 'soft' | 'outline''soft'Visual style variant of the alert
color'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger''neutral'Color theme of the alert
titleReactNode-Alert title text
descriptionReactNode-Alert description/message text
iconReactNode-Custom icon to display
showIconbooleantrueWhether to show the default icon based on color
dismissiblebooleanfalseWhether the alert can be dismissed
onDismiss() => void-Callback when alert is dismissed
actionReactNode-Action element (button, link, etc.)
size'sm' | 'md' | 'lg''md'Size of the alert
rolestring'alert'ARIA role — use 'status' for non-critical messages
childrenReactNode-Alert content (alternative to description)
classNamestring-Additional CSS classes

Accessibility

  • Uses role="alert" by default for important messages
  • Includes aria-live="assertive" for screen reader announcements
  • Dismiss button has aria-label="Dismiss alert" for accessibility
  • Icons are hidden from screen readers with aria-hidden="true"
  • Color contrast meets WCAG AA standards for all variants
  • Keyboard accessible - dismiss button can be focused and activated
  • Supports custom role prop for different use cases (e.g., role="status")