Flux

Notice ​

A UI element designed to inform or alert users about important statuses, events, or actions. It can include an icon, a message, and an optional title, ensuring that critical information is effectively communicated and stands out within the user interface.

TIP

For temporary notifications that auto-dismiss or need less prominence, consider using the Snackbar component. Snackbars are ideal for brief messages.

Required icons

xmark

Props

color?: FluxColor
The color of the notice.

icon?: FluxIconName
The icon that is shown at the start of the notice.

is-center?: boolean
Centers the contents of the notice horizontally.

is-closeable?: boolean
Allows the notice to be closed.

is-fluid?: boolean
Indicates that the notice is used fluidly.

is-loading?: boolean
Adds a loading state at the start of the notice.

message?: string
The message of the notice.

title?: string
The title of the notice.

Emits

close: []
Triggered when the close button is clicked.

Slots

default
Extra content that should be rendered inside the notice.

end
Content that should render at the horizontal end of the notice.

Examples ​

Basic

Notices can display the result of an action that the user performed. The color of the notice depends on whether the result of that action is positive or negative.

<template>
    <FluxNotice
        color="danger"
        icon="circle-exclamation"
        title="Not activated"
        message="Your account is not yet activated, please check your email to activate it."/>
</template>

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

Loading

Notices may also indicate that something is loading.

Sending newsletters...

<template>
    <FluxNotice
        color="info"
        icon="circle-exclamation"
        is-loading
        message="Sending newsletters..."/>
</template>

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

Closeable

Add is-closeable to let users dismiss a notice. The close event fires when the close button is clicked.

You can dismiss this notice when you're done reading it.

<template>
    <FluxNotice
        v-if="isVisible"
        color="info"
        icon="circle-info"
        message="You can dismiss this notice when you're done reading it."
        is-closeable
        @close="onClose"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxNotice } from '@flux-ui/components';
    import { onBeforeUnmount, ref } from 'vue';

    const isVisible = ref(true);

    let timeout: ReturnType<typeof setTimeout>;

    function onClose(): void {
        isVisible.value = false;
        timeout = setTimeout(() => isVisible.value = true, 3000);
    }

    onBeforeUnmount(() => clearTimeout(timeout));
</script>

With action

Use the end slot to render trailing content such as a button next to the message.

You're using 90% of your available storage.

<template>
    <FluxNotice
        color="info"
        icon="circle-info"
        message="You're using 90% of your available storage.">
        <template #end>
            <FluxSecondaryButton label="Upgrade"/>
        </template>
    </FluxNotice>
</template>

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

Centered

The is-center prop horizontally centers the contents of the notice.

Your changes have been published.

<template>
    <FluxNotice
        color="success"
        icon="circle-check"
        message="Your changes have been published."
        is-center/>
</template>

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

Severity colors

The color prop conveys the severity of the message.

Data saved successfully.

New updates are available.

A new version of the app is ready to install.

We've updated the invoice filter, see what's new.

<template>
    <div style="display: flex; flex-direction: column; gap: 12px;">
        <FluxNotice
            color="danger"
            icon="circle-exclamation"
            message="Failed to save data. Please try again."/>

        <FluxNotice
            color="warning"
            icon="circle-exclamation"
            message="You have unsaved changes."/>

        <FluxNotice
            color="success"
            icon="circle-check"
            message="Data saved successfully."/>

        <FluxNotice
            color="info"
            icon="circle-info"
            message="New updates are available."/>

        <FluxNotice
            color="primary"
            icon="circle-info"
            message="A new version of the app is ready to install."/>

        <FluxNotice
            color="gray"
            icon="circle-info"
            message="We've updated the invoice filter, see what's new."/>
    </div>
</template>

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

Severity examples ​

Colors such as success, error, warning, info, and gray help convey the severity of the message. For example:

  • danger: Failed to save data. Please try again.
  • info: New updates are available.
  • success: Data saved successfully.
  • warning: You have unsaved changes.
  • gray: We've updated the invoice filter, see what's new.

Accessibility ​

The notice exposes its severity to assistive technology. A danger or warning notice uses role="alert" with aria-live="assertive" so it is announced immediately, while all other colors use role="status" with aria-live="polite".

Used components ​