Flux

Appearance

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/flux';
</script>

Loading

Notices may also indicate that something is loading.

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

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

Serverty 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.

Used components ​