Alert

The Alert component generates an external alert when the product detects a security event or condition. Alert processing lets you react in real time to critical events or circumstances. Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages

Simple Alert

Simple alerts can be made using pre-defined alert classes.

                               
                                <!-- Add alert class along with the variant class. -->

                                <div class="alert primary-alert">
                                    <p>A simple primary alert—check it out!</p>
                                </div>

                                <div class="alert secondary-alert">
                                    <p>A simple secondary alert—check it out!</p>
                                </div>

                                <div class="alert simple-alert">
                                    <p>A simple success alert—check it out!</p>
                                </div>

                                <div class="alert danger-alert">
                                    <p>A simple danger alert—check it out!</p>
                                </div>

                                <div class="alert warning-alert">
                                    <p>A simple warning alert—check it out!</p>
                                </div>
                               
                           

border Alert

Border alerts has solid borders around them and can be made using pre-defined alert classes.

                                
                                    <!-- Add these border classes along with the reuired variant class -->

                                    <div class="border-alert border-primary-alert">
                                      <p>A simple primary alert—check it out!</p>
                                    </div>

                                    <div class="border-alert border-secondary-alert">
                                      <p>A simple secondary alert—check it out!</p>
                                    </div>

                                    <div class="border-alert border-simple-alert">
                                      <p>A simple success alert—check it out!</p>
                                    </div>

                                    <div class="border-alert border-danger-alert">
                                      <p>A simple danger alert—check it out!</p>
                                    </div>

                                    <div class="border-alert border-warning-alert">
                                      <p>A simple warning alert—check it out!</p>
                                    </div>