Preview Updated 2026-05-10

Snackbar

Single-line pill notification with a built-in action button (e.g. Undo); supports 6 placements.

Basic usage

Differs from Toast: single-line, pill-shaped, with an action. Common use case: an “Undo” after deletion.

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfSnackbar, CfButton } from '@chufix-design/vue';
const open = ref(false);
</script>

<template>
  <div class="demo-row">
    <CfButton @click="open = true">删除一项</CfButton>
    <CfSnackbar
      v-model:open="open"
      tone="success"
      message="Deleted login.request"
      action-label="撤销"
      action-shortcut="⌘Z"
      @action="open = false"
    />
  </div>
</template>

<CfSnackbar
open={open}
onOpenChange={setOpen}
tone="success"
message="Deleted login.request"
actionLabel="Undo"
actionShortcut="⌘Z"
onAction={undo}
/>

Six placements

Default is bottom-center; top-right is a common alternative (doesn’t cover bottom content).

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfSnackbar, CfButton } from '@chufix-design/vue';
import type { SnackbarPlacement } from '@chufix-design/vue';
const open = ref(false);
const placement = ref<SnackbarPlacement>('bottom-center');
function show(p: SnackbarPlacement) {
  placement.value = p;
  open.value = false;
  setTimeout(() => { open.value = true; }, 50);
}
const placements: SnackbarPlacement[] = [
  'bottom-center', 'bottom-left', 'bottom-right',
  'top-center', 'top-left', 'top-right',
];
</script>

<template>
  <div>
    <div class="demo-row" style="flex-wrap: wrap;">
      <CfButton v-for="p in placements" :key="p" size="sm" @click="show(p)">{{ p }}</CfButton>
    </div>
    <CfSnackbar
      v-model:open="open"
      :placement="placement"
      tone="info"
      :message="`Placement: ${placement}`"
    />
  </div>
</template>

<CfSnackbar open={open} onOpenChange={setOpen} placement="bottom-right" message="…" />

API

Prop	Type	Default	Description
`open` / `v-model:open`	`boolean`	—
`tone`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Includes an icon
`placement`	`'bottom-center' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'top-left' \| 'top-right'`	`'bottom-center'`
`duration`	`number`	`5000`	ms; 0 disables auto-close
`actionLabel`	`string`	—	Action button copy
`actionShortcut`	`string`	—	Shortcut hint shown to the right of the action
`showDismiss`	`boolean`	`true`	Show × button