Toast#

Toast is a container for positioning alert notifications at the edges of the page.

A Toast is position: fixed to a corner of the viewport. The previews below wrap each example in a bordered box that acts as the positioning context, so the toasts stay inside their example instead of stacking in the page corner — in your app, drop the wrapper and the toast will anchor to the viewport.

Import#

TSX

import { Toast, Alert } from '@sigx/daisyui';

Basic Usage#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Toast, Alert, Col } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Col width="full" minHeight="140px" background="base-200" rounded class="border border-base-content/20 overflow-hidden [transform:translateZ(0)]">
            <Toast position="bottom-end">
                <Alert variant="info">New message arrived.</Alert>
            </Toast>
        </Col>
    );
});

render(<Demo />, "#sandbox");

Top Positions#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Toast, Alert, Col } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Col width="full" minHeight="180px" background="base-200" rounded class="border border-base-content/20 overflow-hidden [transform:translateZ(0)]">
            <Toast position="top-start">
                <Alert variant="info">Top start</Alert>
            </Toast>
            <Toast position="top-center">
                <Alert variant="success">Top center</Alert>
            </Toast>
            <Toast position="top-end">
                <Alert variant="warning">Top end</Alert>
            </Toast>
        </Col>
    );
});

render(<Demo />, "#sandbox");

Middle Positions#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Toast, Alert, Col } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Col width="full" minHeight="180px" background="base-200" rounded class="border border-base-content/20 overflow-hidden [transform:translateZ(0)]">
            <Toast position="middle-start">
                <Alert variant="info">Middle start</Alert>
            </Toast>
            <Toast position="middle-center">
                <Alert variant="success">Middle center</Alert>
            </Toast>
            <Toast position="middle-end">
                <Alert variant="warning">Middle end</Alert>
            </Toast>
        </Col>
    );
});

render(<Demo />, "#sandbox");

Bottom Positions#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Toast, Alert, Col } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Col width="full" minHeight="180px" background="base-200" rounded class="border border-base-content/20 overflow-hidden [transform:translateZ(0)]">
            <Toast position="bottom-start">
                <Alert variant="info">Bottom start</Alert>
            </Toast>
            <Toast position="bottom-center">
                <Alert variant="success">Bottom center</Alert>
            </Toast>
            <Toast position="bottom-end">
                <Alert variant="warning">Bottom end</Alert>
            </Toast>
        </Col>
    );
});

render(<Demo />, "#sandbox");

Multiple Alerts#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Toast, Alert, Col } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Col width="full" minHeight="200px" background="base-200" rounded class="border border-base-content/20 overflow-hidden [transform:translateZ(0)]">
            <Toast position="bottom-end">
                <Alert variant="info">New mail arrived.</Alert>
                <Alert variant="success">Message sent successfully.</Alert>
                <Alert variant="warning">Connection is slow.</Alert>
            </Toast>
        </Col>
    );
});

render(<Demo />, "#sandbox");

With Custom Class#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Toast, Alert, Col } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Col width="full" minHeight="140px" background="base-200" rounded class="border border-base-content/20 overflow-hidden [transform:translateZ(0)]">
            <Toast position="top-end" class="z-50">
                <Alert variant="error">Something went wrong!</Alert>
            </Toast>
        </Col>
    );
});

render(<Demo />, "#sandbox");

Interactive (Trigger on Click)#

Toasts are usually shown in response to an action and dismissed after a delay. Click the button to show one:

TSX

Loading preview...

import { component, render, signal } from 'sigx';
import { Toast, Alert, Button, Col } from '@sigx/daisyui';

const Demo = component(() => {
    const visible = signal(false);
    let timer;

    const showToast = () => {
        visible.value = true;
        clearTimeout(timer);
        timer = setTimeout(() => { visible.value = false; }, 3000);
    };

    return () => (
        <Col width="full" minHeight="160px" align="start" padding="4" background="base-200" rounded class="border border-base-content/20 overflow-hidden [transform:translateZ(0)]">
            <Button variant="primary" onClick={showToast}>Show toast</Button>
            {visible.value && (
                <Toast position="bottom-end">
                    <Alert variant="success">Saved successfully!</Alert>
                </Toast>
            )}
        </Col>
    );
});

render(<Demo />, "#sandbox");

Props#

Prop	Type	Default	Description
`position`	`ToastPosition`	`"bottom-end"`	Position of the toast container
`class`	`string`	—	Additional CSS classes

ToastPosition#