Alert

Alert informs users about important events or status messages. Supports multiple colors, variants, and optional icons.

Basic Example

Alerts with different colors and icons


const { default: Alert } = await import('/components/data-display/alert.js');

const { tags, $ } = Lightview;
const { div, span } = tags;

const alerts = div({ class: 'space-y-4' },
    Alert({ color: 'info', icon: 'info' },
        span({}, 'New update available! Click to learn more.')
    ),
    Alert({ color: 'success', icon: 'success' },
        span({}, 'Your order has been placed successfully!')
    ),
    Alert({ color: 'warning', icon: 'warning' },
        span({}, 'Please review your information before proceeding.')
    ),
    Alert({ color: 'error', icon: 'error' },
        span({}, 'Unable to connect to server. Please try again.')
    )
);

$('#demo').insert(alerts);

Dismissible Alert

Alert with close button using signals


const { default: Alert } = await import('/components/data-display/alert.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, span } = tags;

const visible = signal(true);

const demo = div({},
    () => visible.value 
        ? Alert({ color: 'success', icon: 'success' },
            span({}, 'Message sent successfully!'),
            Button({ 
                size: 'sm',
                color: 'ghost',
                onclick: () => { visible.value = false; }
            }, '✕')
        )
        : div({ class: 'flex gap-2' },
            span({ class: 'text-sm opacity-50' }, 'Alert dismissed'),
            Button({ 
                size: 'sm',
                color: 'primary',
                onclick: () => { visible.value = true; }
            }, 'Show again')
        )
);

$('#demo').insert(demo);

Props

Prop	Type	Default	Description
`color`	string	-	'info' \| 'success' \| 'warning' \| 'error'
`icon`	string	-	Auto-icon: 'info' \| 'success' \| 'warning' \| 'error'
`soft`	boolean	false	Use soft/light background variant
`outline`	boolean	false	Use outlined border style
`dash`	boolean	false	Use dashed border style

Colors

Default alert — neutral information message.

Info alert — informational message.

Success alert — operation completed successfully.

Warning alert — caution is advised.

Error alert — something went wrong!

Variants

Soft variant — lighter background.

Outline variant — bordered style.

Dash variant — dashed border.

With Actions

We have sent an email with a confirmation link.

For more examples, see the DaisyUI Alert documentation.