Flux

Snackbar ​

The snackbar notifies the user about a task the system has performed or will perform. It can also include actions the user can select.

Update available
A new version of macOS is available.

TIP

For notifications that need prominence, consider using the Notice component.

Requires FluxRoot

By default snackbars render through a parent <FluxRoot>. Without one in your app, nothing appears and no error is thrown. Set is-rendered to render a snackbar inline instead.

Required icons

xmark

Props

actions?: Record<string, string>
The actions that are shown in the snackbar. As key-value pairs.

color?: FluxColor
The color of the snackbar.

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

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

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

is-rendered?: boolean
Renders the snackbar inline instead of globally.

message?: string
The message of the snackbar.

progress-indeterminate?: bool
Indicates that the progress bar is in an indeterminate state.

progress-max?: number
Sets the max value of the progress bar.

progress-min?: number
Sets the min value of the progress bar.

progress-status?: string
Sets the status message of the progress bar.

progress-value?: number
Sets the value of the progress bar.

sub-message?: string
The sub-message of the snackbar.

title?: string
The title of the snackbar.

Emits

action: [string]
Triggered when an action is clicked.

close: []
Triggered when the snackbar is closed.

Functional API ​

Snackbars can be part of your template and controlled with v-if, but they also have an api that you can use within scripts.

ts
showSnackbar({
    color: 'success',
    duration: 3000,
    icon: 'circle-check',
    message: 'Changes saved successfully.'
});
ts
declare function showSnackbar(options: FluxSnackbarObject): Promise<void>;
ts
export type FluxSnackbarObject = {
    readonly id: number;
    readonly actions?: Record<string, string>;
    readonly color?: FluxColor;
    readonly duration?: number;
    readonly icon?: FluxIconName;
    readonly isCloseable?: boolean;
    readonly isLoading?: boolean;
    readonly isRendered?: boolean;
    readonly message?: string;
    readonly progressIndeterminate?: boolean;
    readonly progressMax?: number;
    readonly progressMin?: number;
    readonly progressStatus?: string;
    readonly progressValue?: number;
    readonly subMessage?: string;
    readonly title?: string;

    onAction?(actionKey: string): void;
    onClose?(): void;
};

By default a snackbar dismisses itself after duration milliseconds (6000 by default). Hovering the snackbar pauses this timer and moving the pointer away resumes it, so the message stays readable while the user is interacting with it.

Accessibility ​

Snackbars are announced to assistive technology through a live region. A danger snackbar uses role="alert" with aria-live="assertive" so it is announced immediately; all other colors use role="status" with aria-live="polite" to avoid interrupting the user.

Examples ​

Global

Snackbars render globally by-default.

<template>
    <FluxSnackbar
        v-if="isVisible"
        icon="circle-check"
        message="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate est exercitationem fuga impedit iusto nam nesciunt pariatur porro praesentium quidem! A, accusamus blanditiis dicta esse in itaque neque rerum. Enim!"/>

    <FluxPrimaryButton
        label="Toggle Snackbar"
        @click="isVisible = !isVisible"/>
</template>

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

    const isVisible = ref(false);
</script>

Actions

Actions can be added to the snackbar to request for input.

<template>
    <FluxSnackbar
        v-if="isVisible"
        :actions="{update: 'Update', later: 'Later'}"
        color="primary"
        icon="circle-arrow-up"
        message="A new version of macOS is available."
        title="Update available"
        @action="onAction"/>

    <FluxPrimaryButton
        label="Toggle Snackbar"
        @click="isVisible = !isVisible"/>
</template>

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

    const isVisible = ref(false);

    function onAction(actionKey: string): void {
        isVisible.value = false;

        showSnackbar({
            icon: 'circle-exclamation',
            message: `You clicked ${actionKey}`
        });
    }
</script>

Used components ​