ALERTS
The alert component can be used to provide information to your users
such as
success or error messages, but also highlighted information complementing the normal flow of
paragraphs and headers on a page. Oxygen provides two types of alerts namely:
To use the alert component in your project import the below stylesheet.
Solid Alerts | Outlined AlertsTo use the alert component in your project import the below stylesheet.
@import url("https://oxygen-ui-component-library.netlify.app/components/alert/alert.css")
-
Solid AlertsSolid alerts are used to display important primary information to the user.
Use the base classalertto generate a simple alert. Oxygen provides 4 types of solid alerts namely success, error, primary and a warning alert.
Use the classalert-success | alert-error | alert-primary | alert-warnto get the appropriate alerts in your project.Success - This is a success alert!Error - This is an error alert!Primary - This is a primary alert!Warning - This is a warning alert!<div class="alert-container"> <div class="alert alert-success p-2 mb-2"> Success - This is a success alert! </div> <div class="alert alert-error p-2 mb-2"> Error - This is an error alert! </div> <div class="alert alert-primary p-2 mb-2"> Primary - This is a primary alert! </div> <div class="alert alert-warning p-2 mb-2"> Warning - This is a warning alert! </div> </div> -
Outlined AlertsOutlined alerts are used to display secondary information to the user.
Use the base classalertto generate a simple alert. Oxygen provides 4 types of outlined alerts namely success, error, primary and a warning alert.
Use the classalert-success-outlined | alert-error-outlined | alert-primary-outlined | alert-warn-outlinedto get the appropriate alerts in your project.Success - This is a success alert!Error - This is an error alert!Primary - This is a primary alert!Warning - This is a warning alert!<div class="alert-container"> <div class="alert alert-success-outlined p-2 mb-2"> Success - This is a success alert! </div> <div class="alert alert-error-outlined p-2 mb-2"> Error - This is an error alert! </div> <div class="alert alert-primary-outlined p-2 mb-2"> Primary - This is a primary alert! </div> <div class="alert alert-warning-outlined p-2 mb-2"> Warning - This is a warning alert! </div> </div>