Toast is a small, temporary notification that appears on the screen to inform the user of an event or to display a brief message.

Toast directions as below:

- null-toast-top null-toast-right : Toast will appear on the top right of the screen:

<div class="null-toast-container">

    <div class="null-toast null-background-white null-box-shadow  null-border-radius null-toast-top null-toast-right">

        <div class="null-toast-content-container null-display-flex null-align-items-center">


            <div class="null-toast-content null-display-flex null-flex-direction-column">
                <div class="null-toast-content-title null-font-weight-bold null-color-main null-margin-bottom-10">
                    Success
                </div>
                <div class="null-toast-content-description">Your changes has been saved</div>
            </div><!--End null-toast-content-->


        </div><!--End null-toast-content-container-->
        
        <div class="null-toast-close-container null-color-white">
            <span class="null-toast-close null-cursor-pointer null-flex">×</span>
        </div><!--End null-toast-close-container-->


        <div class="null-toast-progress"></div>
        
    </div><!--End null-toast-->
    
    <button class="null-button null-button-secondary null-margin-bottom-10 null-toast-button">
        Show Toast
    </button>

</div><!--End null-toast-container-->

- null-toast-bottom null-toast-right : Toast will appear on the bottom right of the screen:

<div class="null-toast-container">

    <div class="null-toast null-background-white null-box-shadow  null-border-radius null-toast-bottom null-toast-right">

        <div class="null-toast-content-container null-display-flex null-align-items-center">


            <div class="null-toast-content null-display-flex null-flex-direction-column">
                <div class="null-toast-content-title null-font-weight-bold null-color-main null-margin-bottom-10">
                    Success
                </div>
                <div class="null-toast-content-description">Your changes has been saved</div>
            </div><!--End null-toast-content-->


        </div><!--End null-toast-content-container-->
        
        <div class="null-toast-close-container null-color-white">
            <span class="null-toast-close null-cursor-pointer null-flex">×</span>
        </div><!--End null-toast-close-container-->


        <div class="null-toast-progress"></div>
        
    </div><!--End null-toast-->
    
    <button class="null-button null-button-secondary null-margin-bottom-10 null-toast-button">
        Show Toast
    </button>

</div><!--End null-toast-container-->

- null-toast-bottom null-toast-left : Toast will appear on the bottom left of the screen:

<div class="null-toast-container">

    <div class="null-toast null-background-white null-box-shadow  null-border-radius null-toast-bottom null-toast-left">

        <div class="null-toast-content-container null-display-flex null-align-items-center">


            <div class="null-toast-content null-display-flex null-flex-direction-column">
                <div class="null-toast-content-title null-font-weight-bold null-color-main null-margin-bottom-10">
                    Success
                </div>
                <div class="null-toast-content-description">Your changes has been saved</div>
            </div><!--End null-toast-content-->


        </div><!--End null-toast-content-container-->
        
        <div class="null-toast-close-container null-color-white">
            <span class="null-toast-close null-cursor-pointer null-flex">×</span>
        </div><!--End null-toast-close-container-->


        <div class="null-toast-progress"></div>
        
    </div><!--End null-toast-->
    
    <button class="null-button null-button-secondary null-margin-bottom-10 null-toast-button">
        Show Toast
    </button>

</div><!--End null-toast-container-->

- null-toast-top null-toast-left : Toast will appear on the top left of the screen:

<div class="null-toast-container">

    <div class="null-toast null-background-white null-box-shadow  null-border-radius null-toast-top null-toast-left">

        <div class="null-toast-content-container null-display-flex null-align-items-center">


            <div class="null-toast-content null-display-flex null-flex-direction-column">
                <div class="null-toast-content-title null-font-weight-bold null-color-main null-margin-bottom-10">
                    Success
                </div>
                <div class="null-toast-content-description">Your changes has been saved</div>
            </div><!--End null-toast-content-->


        </div><!--End null-toast-content-container-->
        
        <div class="null-toast-close-container null-color-white">
            <span class="null-toast-close null-cursor-pointer null-flex">×</span>
        </div><!--End null-toast-close-container-->


        <div class="null-toast-progress"></div>
        
    </div><!--End null-toast-->
    
    <button class="null-button null-button-secondary null-margin-bottom-10 null-toast-button">
        Show Toast
    </button>

</div><!--End null-toast-container-->