JB Framework

Toasts

Animations

Show slide-in toast Show fade toast Show toast without animations

<p>
    <button type="button" onclick="Toast.show({text: 'Lorem ipsum.'})">Show slide-in toast</button>
    <button type="button" onclick="Toast.show({animation: 'fade', from: '', text: 'Lorem ipsum.'})">Show fade toast</button>
    <button type="button" onclick="Toast.show({animation: null, text: 'Lorem ipsum.'})">Show toast without animations</button>
</p>

Non-disappearing toast

Show non-disappearing toast

<p>
    <button type="button" onclick="Toast.show({autoDismiss: false, text: 'Lorem ipsum.'})">Show non-disappearing toast</button>
</p>

Positions

Show toast in top left Show toast in top right Show toast in bottom left Show toast in bottom right Show center toast

<p>
    <button type="button" onclick="Toast.show({text: 'Lorem ipsum.', position: 'top-left'})">Show toast in top left</button>
    <button type="button" onclick="Toast.show({text: 'Lorem ipsum.', position: 'top-right'})">Show toast in top right</button>
    <button type="button" onclick="Toast.show({text: 'Lorem ipsum.', position: 'bottom-left'})">Show toast in bottom left</button>
    <button type="button" onclick="Toast.show({text: 'Lorem ipsum.', position: 'bottom-right'})">Show toast in bottom right</button>
    <button type="button" onclick="Toast.show({text: 'Lorem ipsum.', position: 'center'})">Show center toast</button>
</p>

Classes

Show alert toast

<p>
    <button type="button" onclick="Toast.show({text: 'Lorem ipsum.', class: 'toast--alert'})">Show alert toast</button>
</p>

Multi-line

Show multi-line toast

<p>
    <button type="button" onclick="Toast.show({text: 'Litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque blandit, leo tristique ultrices volutpat, orci tortor sagittis elit.'})">Show multi-line toast</button>
</p>