Alert

An inline alert/notification component for displaying important messages with semantic variants, optional actions, and dismissible states.

Import

import PrettyUI

Basic Usage

// Simple alert
PAlert("This is an informational message", variant: .info)

// With description
PAlert("Transaction Successful", variant: .success)
    .description("Your payment has been processed.")

Variants

Four semantic variants are available:

VStack(spacing: 16) {
    PAlert("This is an informational message", variant: .info)
    PAlert("Transaction completed successfully", variant: .success)
    PAlert("Please review your settings", variant: .warning)
    PAlert("Connection failed", variant: .error)
}

With Description

Add detailed context with a description:

PAlert("Update Available", variant: .info)
    .description("A new version of the app is available. Update now to get the latest features and improvements.")

PAlert("Wallet Connected", variant: .success)
    .description("Your wallet has been successfully connected to the app.")

Dismissible Alerts

Make alerts dismissible with a close button:

PAlert("Network Warning", variant: .warning)
    .description("You're connected to an unsecured network.")
    .dismissible()

// With callback
PAlert("Session Expired", variant: .error)
    .dismissible {
        print("Alert dismissed")
    }

Action Buttons

Add actionable buttons to alerts:

PAlert("Update Required", variant: .info)
    .description("Please update the app to continue using all features.")
    .action("Update Now") {
        openAppStore()
    }

PAlert("Transaction Failed", variant: .error)
    .description("Your transaction could not be completed.")
    .action("Retry") {
        retryTransaction()
    }
    .dismissible()

Custom Icons

Override the default variant icon:

PAlert("Backup Complete", variant: .success)
    .icon("icloud.and.arrow.up.fill")
    .description("Your wallet has been backed up to iCloud.")

PAlert("Low Battery", variant: .warning)
    .icon("battery.25")
    .description("Connect your device to a charger.")

Hide Icon

Remove the icon entirely:

PAlert("Simple notification message", variant: .info)
    .hideIcon()

Alert Styles

Three layout styles are available:

// Standard (default) - full padding
PAlert("Standard Alert", variant: .info)
    .style(.standard)

// Compact - reduced padding for inline use
PAlert("Compact Alert", variant: .success)
    .style(.compact)

// Banner - larger padding for top/bottom placement
PAlert("Banner Alert", variant: .warning)
    .style(.banner)

Alert Banner Modifier

Use the .alertBanner() modifier to show alerts at the top of a view:

@State private var showAlert = false

ContentView()
    .alertBanner(
        isPresented: $showAlert,
        title: "Connection Lost",
        variant: .error,
        description: "Please check your internet connection."
    )

Real-World Examples

Form Validation Error

PAlert("Please fix the following errors", variant: .error)
    .description("• Email address is invalid\n• Password must be at least 8 characters")
    .style(.standard)

Feature Announcement

PAlert("New Feature Available!", variant: .info)
    .icon("sparkles")
    .description("You can now export your data in multiple formats.")
    .action("Learn More") {
        showFeatureDetails()
    }
    .dismissible()

Network Status

PAlert("Offline Mode", variant: .warning)
    .icon("wifi.slash")
    .description("Some features may be limited.")
    .dismissible()

Success Confirmation

PAlert("Email Verified", variant: .success)
    .description("Your email has been successfully verified. You can now access all features.")

API Reference

PAlert Initializer

PAlert(_ title: String, variant: PAlertVariant = .info)

Modifiers

View Modifier

.alertBanner(
    isPresented: Binding<Bool>,
    title: String,
    variant: PAlertVariant = .info,
    description: String? = nil
)

Enums

PAlertVariant

• .info — Informational (blue/primary)
• .success — Success (green)
• .warning — Warning (orange)
• .error — Error (red)

PAlertStyle

• .standard — Default padding
• .compact — Reduced padding
• .banner — Larger padding for banners

Accessibility

PAlert automatically:

• Uses semantic colors that adapt to light/dark mode
• Supports reduced motion preferences
• Provides clear visual hierarchy for VoiceOver