TyroUiSnackbarService

Snackbar

Toast notification appearing in any of the 4 corners. Always dark, even in light theme. Trigger via TyroUiSnackbarService.show(config). Place <tyro-ui-snackbar> once in the root layout.

Choose a corner

Examples

Click a button to trigger the snackbar

Service API

ITyroUiSnackbarConfig

Property	Type	Default	Description
`message`	`string`	`-`	Main text (required)
`title`	`string`	`-`	Bold title
`icon`	`string (Remix Icon)`	`-`	Icon - defaults to type icon if empty
`type`	`'default' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Accent color for the left border and icon
`position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`	Window corner where the snackbar appears
`duration`	`number (ms)`	`4000`	0 = no auto-close

Setup

Root layout - add once

<tyro-ui-dashboard-layout [...]>
  <router-outlet />
</tyro-ui-dashboard-layout>
<tyro-ui-snackbar></tyro-ui-snackbar>

Usage in a component

constructor(private snackbar: TyroUiSnackbarService) {}

this.snackbar.show({
  type: 'success',
  title: 'Formulaire envoyé',
  message: 'Votre message a bien été reçu.',
  position: 'bottom-right', // défaut
  duration: 4000,           // 0 = pas d'auto-fermeture
});