Flux

Appearance

Snackbar ​

Snackbars are used to notify the user about tasks that have been or will be performed by the system. They can also include actions that the user can select.

Update available
A new version of macOS is available.

TIP

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

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;
};

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