Toast

</> Show code

Creating a toast can help you to send messages to your users through simple notifications.
They are easily customisable using any of the axentix classes.

To know all the ways to initialize a JS component, please read the JS Init page.

Change toast

A website using the toast feature always needs to use different Toasts, to show different informations.
Using the change() method, you can change the content and the classes of your toast.

Closable toast

Using the isClosable option, you can let your user close your toasts by clicking on a cross.

Custom closing element

Using data-toast-close on an element of the toast content, you can create your own close elements closing the toast.

Options

Property Default value Description
animationDuration 400 Opening and closing animation duration in ms.
duration 4000 The display duration of the toast before disapearing in ms.
classes '' Classes of the toast.
position right Position of the toast container.
Accepted values are 'right' or 'left'.
direction top Animation direction of the toast.
Accepted values are 'top' or 'bottom'.
mobileDirection bottom Animation direction of the toast on mobile view.
Accepted values are 'top' or 'bottom'.
isClosable false Create an icon to close the toast.
isSwipeable true Enable the ability to swipe the toast to dismiss.
closableContent 'x' The content to close the toast. You can write html to create a button or anything.
loading 
            
              {
                enabled: true,
                border: '2px solid #E2E2E2'
              }
Loading animation. You can disable it and custom the border used for it.
offset 
            
              {
                x: '5%',
                y: '0%',
                mobileX: '10%',
                mobileY: '0%'
              }
Offsets between the sides of the screen and the toaster. Useful if you don't want a toast to be placed above your navbar for example.

Methods

Method Description
.show() Show the toast.
.change('content', options) Change the content of the Toast.
The second parameter is optional, but can be useful when you want to change multiple options like the classes and the position at the same time.
Here is an example.

Events

Event Description
ax.toast.show Event sent when the show() method is called.
ax.toast.shown Event sent when the toast has been shown.
ax.toast.hide Event sent when the toast is being closed.
ax.toast.remove Event sent when the toast has been closed.

Styling

CSS Variable Default value Description
--ax-toaster-z-index 1000 Toast holder z-index.