Toast

Home Toast

The Toast component displays temporary notifications to inform users about actions, status changes, or events. It appears briefly and automatically disappears after a set duration.

<?php

use Lib\PHPXUI\{Button, Toast};

?>

<Toast open="{toast}" onOpenChange="{setToast}" description="{toast.description}" />
<Button variant="outline" onclick="showToast()">Show Toast</Button>

<script>
    const [toast, setToast] = pp.state(false);

    function showToast() {
        setToast({
            show: true,
            description: "Your message has been sent."
        });
    }
</script>

Installation

npm

npx phpxui add Toast

Usage

use Lib\PHPXUI\Toast

<Toast open="{toast}" onOpenChange="{setToast}" />

<script>
    const [toast, setToast] = pp.state(false);
</script>

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

Installation

Usage