Skip to content

alert.md

Latest commit

 

History

History
275 lines (234 loc) · 7.26 KB

alert.md

File metadata and controls

275 lines (234 loc) · 7.26 KB
Raw

Alert Component

A customizable alert component for displaying important messages with various severity levels.

Installation

npx @angular-superui/cli add alert

Import

import { Alert, AlertIcon, AlertTitle, AlertDescription } from '@angular-superui/lib';

Usage

Basic Alert

<Alert>
  <AlertIcon>
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      You can add components and dependencies to your app using the cli.
    </AlertDescription>
  </div>
</Alert>

Alert Variants

Default Alert

<Alert>
  <AlertIcon>
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Information</AlertTitle>
    <AlertDescription>
      This is a default alert for general information.
    </AlertDescription>
  </div>
</Alert>

Destructive Alert

<Alert variant="destructive">
  <AlertIcon>
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z" />
    </svg>
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
      Your session has expired. Please log in again.
    </AlertDescription>
  </div>
</Alert>

Warning Alert

<Alert variant="warning">
  <AlertIcon>
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z" />
    </svg>
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>
      This action cannot be undone. Please proceed with caution.
    </AlertDescription>
  </div>
</Alert>

Success Alert

<Alert variant="success">
  <AlertIcon>
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>
      Your changes have been saved successfully.
    </AlertDescription>
  </div>
</Alert>

Info Alert

<Alert variant="info">
  <AlertIcon>
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Information</AlertTitle>
    <AlertDescription>
      You have 3 unread messages in your inbox.
    </AlertDescription>
  </div>
</Alert>

Simple Alert (Without Icon)

<Alert variant="success">
  <div class="flex-1">
    <AlertTitle>Success!</AlertTitle>
    <AlertDescription>
      Operation completed successfully.
    </AlertDescription>
  </div>
</Alert>

Alert with Custom Content

<Alert variant="warning">
  <AlertIcon>
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z" />
    </svg>
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Update Available</AlertTitle>
    <AlertDescription>
      A new version of the application is available. 
      <a href="#" class="font-medium underline">Update now</a> or 
      <button class="font-medium underline">remind me later</button>.
    </AlertDescription>
  </div>
</Alert>

Component API

Alert

Prop Type Default Description
variant 'default' | 'destructive' | 'warning' | 'success' | 'info' 'default' The visual style variant
className string undefined Additional CSS classes

AlertIcon

Prop Type Default Description
className string undefined Additional CSS classes

AlertTitle

Prop Type Default Description
className string undefined Additional CSS classes

AlertDescription

Prop Type Default Description
className string undefined Additional CSS classes

TypeScript Support

All components are fully typed with TypeScript:

import { Component } from '@angular/core';
import { Alert, AlertIcon, AlertTitle, AlertDescription } from '@angular-superui/lib';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [Alert, AlertIcon, AlertTitle, AlertDescription],
  template: `
    <Alert variant="success" className="mb-4">
      <AlertIcon>
        <!-- Your icon here -->
      </AlertIcon>
      <div class="flex-1">
        <AlertTitle>Success!</AlertTitle>
        <AlertDescription>
          Your action completed successfully.
        </AlertDescription>
      </div>
    </Alert>
  `
})
export class ExampleComponent {}

Accessibility

  • Uses semantic HTML with proper ARIA attributes
  • Supports keyboard navigation
  • Screen reader friendly with proper labeling
  • Live regions for dynamic alerts (automatically announced)
  • Color-blind friendly design with multiple visual indicators

Styling

The Alert component uses Tailwind CSS classes and can be customized:

<Alert className="border-2 shadow-lg" variant="info">
  <!-- Alert content -->
</Alert>

Common Patterns

Dismissible Alert

<Alert variant="warning" className="relative">
  <AlertIcon>
    <!-- Warning icon -->
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>
      This is a dismissible warning alert.
    </AlertDescription>
  </div>
  <button class="absolute top-2 right-2 p-1 hover:bg-slate-100 rounded">
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</Alert>

Loading Alert

<Alert variant="info">
  <AlertIcon>
    <div class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full"></div>
  </AlertIcon>
  <div class="flex-1">
    <AlertTitle>Loading...</AlertTitle>
    <AlertDescription>
      Please wait while we process your request.
    </AlertDescription>
  </div>
</Alert>