Alert

Home Alert

The Alert component allows you to display important messages to the user. It can be used to show success messages, error messages, or any other type of feedback that requires the user's attention.

<?php

use Lib\PHPXUI\{Alert, AlertTitle, AlertDescription};
use Lib\PPIcons\{CircleAlert, CircleCheck, Popcorn};

?>

<div class="grid w-full max-w-xl mx-auto items-start gap-4">
    <Alert>
        <CircleCheck />
        <AlertTitle>Success! Your changes have been saved</AlertTitle>
        <AlertDescription>
            This is an alert with icon, title and description.
        </AlertDescription>
    </Alert>
    <Alert>
        <Popcorn />
        <AlertTitle>
            This Alert has a title and an icon. No description.
        </AlertTitle>
    </Alert>
    <Alert variant="destructive">
        <CircleAlert />
        <AlertTitle>Unable to process your payment.</AlertTitle>
        <AlertDescription>
            <p>Please verify your billing information and try again.</p>
            <ul class="list-inside list-disc text-sm">
                <li>Check your card details</li>
                <li>Ensure sufficient funds</li>
                <li>Verify billing address</li>
            </ul>
        </AlertDescription>
    </Alert>
</div>

Installation

npm

npx phpxui add Alert

Usage

use Lib\PHPXUI\{
    Alert,
    AlertTitle,
    AlertDescription,
}

<Alert variant="default | destructive | success | warning | info">
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Alert const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Alert'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

Installation

Usage