Snackbar

A toast to display message and perform action.

Basic Usage

Snackbar uses Vue's <Teleport> component to attach the snackbar component to the HTML body. It also utilizes Vue's defineExpose to expose five functions for displaying different snackbars..

<template>
  <spr-snackbar ref="snackbar" />

  <spr-button @click="showSnackbar1">Show Snackbar</spr-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const snackbar = ref(null);

const showSnackbar1 = () => {
  snackbar.value.showSnackbar({
    text: 'This is a sample message.',
  });
};
</script>

Tone

The snackbar can have four tones: success, information, danger, caution.

<template>
  <div class="spr-flex spr-items-center spr-gap-2">
    <spr-snackbar ref="snackbar" />
    <spr-button @click="showInformation">Show Information</spr-button>
    <spr-button @click="showSuccess" tone="success">Show Success</spr-button>
    <spr-button @click="showDanger" tone="danger">Show Danger</spr-button>
    <spr-button @click="showCaution" tone="danger" variant="secondary">Show Caution</spr-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const snackbar = ref(null);

const showSuccess = () => {
  snackbar.value.showSuccess({
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    showIcon: true,
  });
};

const showInformation = () => {
  snackbar.value.showInformation({
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    showIcon: true,
  });
};

const showDanger = () => {
  snackbar.value.showDanger({
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    showIcon: true,
  });
};

const showCaution = () => {
  snackbar.value.showCaution({
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    showIcon: true,
  });
};
</script>

TIP

Alternatively, you can use the default showSnackbar() and define the tone property as success, information, danger, caution.

Action

The action property is a clickable label on the snackbar where we can define a function. When action is not define, the default is it deletes the snackbar.

<template>
  <spr-snackbar ref="snackbar" />

  <spr-button @click="showWithCloseButton">Show snackbar with close action</spr-button>
  <spr-button @click="showWithFunction">Show snackbar with function</spr-button>
  <spr-button @click="showWithActionIconOnly">Show snackbar with action icon</spr-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const snackbar = ref(null);

const showWithCloseButton = () => {
  snackbar.value.showInformation({
    text: 'This snackbar closes when you click the close action',
    showIcon: true,
    actionText: 'close',
    showAction: true,
  });
};

const showWithFunction = () => {
  snackbar.value.showCaution({
    text: 'This snackbar calls a function',
    showIcon: true,
    actionText: 'action',
    showAction: true,
    action: () => alert('Action was clicked.'),
  });
};

const showWithActionIconOnly = () => {
  snackbar.value.showSnackbar({
    text: 'This snackbar calls a function',
    tone: 'danger',
    showIcon: true,
    actionText: '',
    showAction: true,
    actionIconProps: {
      icon: 'ph:trash-fill',
      tone: 'danger',
    },
    action: () => alert('Snackbar With Action Icon.'),
  });
};
</script>

Snackbar Actions Slot

This slot allows you to customize the action section of the snackbar. You can use any component or HTML element as the action.

WARNING

showAction property must be set to true in order to render the slot.

<template>
  <spr-snackbar ref="slottedActionSnackbar">
    <template #snackbarActions>
      <div class="spr-flex spr-cursor-pointer spr-items-center">
        <spr-button class="spr-mr-2" @click="handleSlottedAction">
          Slotted Action
        </spr-button>
        Action Text
      </div>
    </template>
  </spr-snackbar>
  <spr-button @click="showSlottedSnackbarAction">Show snackbar with function</spr-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const slottedActionSnackbar = ref(null);

const handleSlottedAction = () => {
  // Handle the slotted action click
  alert('Slotted action clicked');
};

const showSlottedSnackbarAction = () => {
  slottedActionSnackbar.value.showSnackbar({
    text: 'This snackbar has a slotted action',
    tone: 'success',
    showIcon: true,
    showAction: true,
    actionText: '',
  });
};
</script>

API Reference

Props

Name	Description	Type	Default
text	Text message to be displayed in the snackbar. This is the main content that communicates information to the user.	string	Required
tone	Determines the color scheme and icon of the snackbar to convey different types of messages: success: Green color scheme with check circle icon information: Blue color scheme with info icon danger: Red color scheme with warning circle icon caution: Orange color scheme with warning icon	'success' | 'information' | 'danger' | 'caution'	'information'
showIcon	Controls the visibility of the tone-specific icon in the snackbar.	boolean	false
actionText	Label text for the action button. This appears as a clickable text that can trigger the action function.	string	'action'
showAction	Controls the visibility of the action button/text in the snackbar. When set to true, the action text/button will be shown.	boolean	false
action	Function to be executed when the action text/button is clicked. If not provided, the default action is to close the snackbar.	Function	() => {}
duration	Duration in milliseconds for which the snackbar will be displayed before automatically disappearing. Set via the snackbar store.	number	4000
actionIconProps	Configuration object for the action icon button. Contains: icon: Iconify icon name to display on the button tone: Color scheme for the icon button	{ icon: string; tone: 'neutral' | 'success' | 'danger' }	undefined

Events

Name	Description	Parameters
click	Emitted when the snackbar is clicked. This event is from the Snack component.	(evt: MouseEvent) - The mouse event object

Slots

Name	Description
default / snackbarActions	Slot for customizing the action section of the snackbar. Note that showAction must be set to true for this slot to be rendered.
icon	Slot for customizing the icon shown in the snackbar. Available in the Snack component.
label	Slot for customizing the text label content. Available in the Snack component.

Exposed Methods

Method	Description	Parameters
showSnackbar	Displays a snackbar with the provided configuration. Use this method when you want to fully customize the snackbar.	(payload: SnackPropTypes) - Configuration object with the props described above
showSuccess	Displays a success snackbar (green) with the provided configuration. Automatically sets the tone to 'success'.	(payload: SnackPropTypes) - Configuration object (tone will be overridden)
showInformation	Displays an information snackbar (blue) with the provided configuration. Automatically sets the tone to 'information'.	(payload: SnackPropTypes) - Configuration object (tone will be overridden)
showDanger	Displays a danger snackbar (red) with the provided configuration. Automatically sets the tone to 'danger'.	(payload: SnackPropTypes) - Configuration object (tone will be overridden)
showCaution	Displays a caution snackbar (orange) with the provided configuration. Automatically sets the tone to 'caution'.	(payload: SnackPropTypes) - Configuration object (tone will be overridden)