Snackbar

Short bottom message with an optional action and close button. The size prop (xs, sm, md, lg, xl) scales height, padding and text.

Jump to API reference

Import

Vue

import { UiSnackbar } from '@ziyarago/ui/vue'

With action

Booking cancelled

Vue

<UiSnackbar tone="danger" action="Undo">
  Booking cancelled
</UiSnackbar>

Tonal

Room added to your trip

Vue

<UiSnackbar variant="tonal" tone="success" action="View">
  Room added to your trip
</UiSnackbar>

Sizes

Booking cancelled

Vue

<UiSnackbar size="xs" action="Undo">
  Booking cancelled
</UiSnackbar>

<UiSnackbar size="sm" action="Undo">
  Booking cancelled
</UiSnackbar>

<UiSnackbar size="md" action="Undo">
  Booking cancelled
</UiSnackbar>

<UiSnackbar size="lg" action="Undo">
  Booking cancelled
</UiSnackbar>

<UiSnackbar size="xl" action="Undo">
  Booking cancelled
</UiSnackbar>

API reference

Compact dark bar with a message and one optional action; use for undo and short confirmations at the bottom of the screen.

Props

PropType and valuesDefaultDescription

tonebrandskysuccesswarningdangerneutral'brand'Accent color; affects the tonal background (and the action color: green for success, red otherwise).

variantsolidtonal'solid'Solid inverse background or a tone-tinted one.

actionstring—Label of the action button. The button is rendered only when set.

sizexssmmdlgxl'md'Scale of height, padding and text.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultMessage text.

Events

Vue: @name. React: onName.

actionCalled when the action button is clicked.

closeCalled when the close icon is clicked. The icon is rendered only when this handler is set.

Notes

Presentational only: no timer or positioning.