Alert

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

Basic Usage

Alerts with different colors and icons. 

await import('/components/data-display/alert.js');
const { tags, $ } = Lightview;
const { div, span, Alert } = tags;

const alerts = div({ style: 'display: flex; flex-direction: column; gap: 1rem;' },
    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.')
    )
);

$('#example').content(alerts);
await import('/components/data-display/alert.js');
const { $, tags } = Lightview;
const { Alert, div, span } = tags;

const alerts = {
    tag: div,
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem;' },
    children: [
        {
            tag: Alert,
            attributes: { color: 'info', icon: 'info' },
            children: [{ tag: span, children: ['New update available! Click to learn more.'] }]
        },
        {
            tag: Alert,
            attributes: { color: 'success', icon: 'success' },
            children: [{ tag: span, children: ['Your order has been placed successfully!'] }]
        },
        {
            tag: Alert,
            attributes: { color: 'warning', icon: 'warning' },
            children: [{ tag: span, children: ['Please review your information before proceeding.'] }]
        },
        {
            tag: Alert,
            attributes: { color: 'error', icon: 'error' },
            children: [{ tag: span, children: ['Unable to connect to server. Please try again.'] }]
        }
    ]
};

$('#example').content(alerts);
await import('/components/data-display/alert.js');
const { $ } = Lightview;

const alerts = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem;',
        children: [
            { Alert: { color: 'info', icon: 'info', children: ['New update available! Click to learn more.'] } },
            { Alert: { color: 'success', icon: 'success', children: ['Your order has been placed successfully!'] } },
            { Alert: { color: 'warning', icon: 'warning', children: ['Please review your information before proceeding.'] } },
            { Alert: { color: 'error', icon: 'error', children: ['Unable to connect to server. Please try again.'] } }
        ]
    }
};

$('#example').content(alerts);
<!-- Import the component (registers lv-alert) -->
<script type="module" src="/components/data-display/alert.js"></script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
    <lv-alert color="info" icon="info">New update available!</lv-alert>
    <lv-alert color="success" icon="success">Your order has been placed!</lv-alert>
    <lv-alert color="warning" icon="warning">Please review before proceeding.</lv-alert>
    <lv-alert color="error" icon="error">Connection failed.</lv-alert>
</div>

Dismissible Alert

Alert with close button using signals.

await import('/components/data-display/alert.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, span, Alert, Button } = 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({ style: 'display: flex; gap: 0.5rem;' },
            span({ style: 'font-size: 0.875rem; opacity: 0.5;' }, 'Alert dismissed'),
            Button({ 
                size: 'sm',
                color: 'primary',
                onclick: () => { visible.value = true; }
            }, 'Show again')
        )
);

$('#example').content(demo);
await import('/components/data-display/alert.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { div, span, Alert, Button } = tags;

const visible = signal(true);

const demo = {
    tag: div,
    children: [
        () => visible.value 
            ? {
                tag: Alert,
                attributes: { color: 'success', icon: 'success' },
                children: [
                    { tag: span, children: ['Message sent successfully!'] },
                    { 
                        tag: Button, 
                        attributes: { size: 'sm', color: 'ghost', onclick: () => { visible.value = false; } },
                        children: ['✕']
                    }
                ]
            }
            : {
                tag: div,
                attributes: { style: 'display: flex; gap: 0.5rem;' },
                children: [
                    { tag: span, attributes: { style: 'font-size: 0.875rem; opacity: 0.5;' }, children: ['Alert dismissed'] },
                    { 
                        tag: Button, 
                        attributes: { size: 'sm', color: 'primary', onclick: () => { visible.value = true; } },
                        children: ['Show again']
                    }
                ]
            }
    ]
};

$('#example').content(demo);
await import('/components/data-display/alert.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;

const visible = signal(true);

const demo = {
    div: {
        children: [
            () => visible.value 
                ? {
                    Alert: {
                        color: 'success',
                        icon: 'success',
                        children: [
                            'Message sent successfully!',
                            { Button: { size: 'sm', color: 'ghost', onclick: () => { visible.value = false; }, children: ['✕'] } }
                        ]
                    }
                }
                : {
                    div: {
                        style: 'display: flex; gap: 0.5rem;',
                        children: [
                            { span: { style: 'font-size: 0.875rem; opacity: 0.5;', children: ['Alert dismissed'] } },
                            { Button: { size: 'sm', color: 'primary', onclick: () => { visible.value = true; }, children: ['Show again'] } }
                        ]
                    }
                }
        ]
    }
};

$('#example').content(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.