Flux

Notice stack ​

The notice stack organizes notices in a vertical flow. This helps group related alerts or system messages while maintaining structure and readability.

Order is being shipped!

Your order has been shipped and should arrive soon.

Slots

default
The notices that should be stacked.

Examples ​

Basic

A basic notice stack.

Order is being shipped!

Your order has been shipped and should arrive soon.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxNoticeStack>
                <FluxNotice
                    icon="truck"
                    color="success"
                    title="Order is being shipped!"
                    message="Your order has been shipped and should arrive soon."/>

                <FluxNotice
                    icon="circle-exclamation"
                    color="warning"
                    title="It's very busy!"
                    message="We're currently experiencing the holiday rush, that means it's very busy right now. Your order might be delayed by 1-3 days."/>
            </FluxNoticeStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxNotice, FluxNoticeStack, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Used component ​