Toasts

basic toast

toggle toast

                
                    <div class="toast-container pos-fixed toast-pos flx flx-center">
                        <div class='toast-md txt-secondary bg-secondary pd-s flx flx-maj-stretch flx-min-center'>
                            <div class='txt-md'>
                                Cannot send the photo. Check the internet connection.
                                <button class='pd-xs txt-ucase txt-600 btn-txt bg-secondary txt-secondary'>
                                    retry
                                </button>
                            </div>
                            <span class='material-icons icon-secondary'>
                                close
                            </span>
                        </div>
                    </div>
                
            

toast css

                
                    .toast-container {
                        width: 100%;
                    }
                    
                    .toast-pos {
                        bottom: 1rem;
                    }
                    
                    .toast-s {
                        width: 20rem;
                    }
                    
                    .toast-md {
                        width: 35rem;
                    }
                    
                    .toast-lg {
                        width: 50rem;
                    }