@toujou/toujou-snackbar v3.8.3

Toujou Snackbar

The toujou snackbar element is a way to provide brief messages / acknowledgements to the user.

It may or may not require an action from the user.

We can customize the toujou-snackbar type ('auto' or 'action'), message, duration and button properties, and use it with one of the available variants (default. success, warning, error, info).

Installation

  npm install @toujou/toujou-snackbar

Events

add-snackbar event

The toujou-snackbar element is triggered via the add-snackbar custom event (which can be dispatch by any other elements). The add-snackbar event needs:

Examples of add-snackbar custom events

'Auto' Snackbar.

'Auto' Snackbars are dismissed automatically after a certain amount of time. The suggested values are between 3 and 10 seconds.

const addSnackbarEvent = new CustomEvent('add-snackbar', {
   bubbles: true,
   composed: true,
   detail: {
      message: `welcome to the bonus page!`,
      type: 'auto',
      duration: 4000,
      variant: 'success'
   }
})

'Action' Snackbar.

'Action' Snackbars are not dismissed automatically. The user needs to take action to dismiss them.

const addSnackbarEvent = new CustomEvent('add-snackbar', {
   bubbles: true,
   composed: true,
   detail: {
      message: `Settings saved!`,
      type: 'action',
      buttonText: 'Dismiss'
   }
})

Custom CSS properties

We can style the toujou-snackbar element by using custom css properties

Style the toujou-snackbar element:

Style the toujou-snackbar[visible]:

Style the .snackbar__message inside the toujou-snackbar element

Style the .snackbar__button inside the toujou-snackbar element

Style the .snackbar__button:hover inside the toujou-snackbar element

Variants

The toujou-snackbar element has 5 variants: default, success, warning, error and info.

To choose the variant you want to use you just need to add the variant property to the add-snackbar custom event.

If there is no variant property, the default variant will be used.

Variant styles

You can also customize some variant styles using custom CSS variables.

Success Variant

Should be used to show a success message to the user, for instance a 'successfully saved' message.

Warning Variant

Should be used to show a warning message to the user, for instance a 'your consent expires tomorrow' message

Error Variant

Should be used to show an error message to the user, for instance 'there was an error while saving your settings' message

Info Variant

Should be used to show an information message to the user, for instance 'there is a new update available'