import React, { useState } from 'react'; import { Alert, Button, Card, Col, Container, Row } from 'react-bootstrap'; import PreviewCardHeader from '../../../Components/Common/PreviewCardHeader'; // Import Content import UiContent from '../../../Components/Common/UiContent'; //import Components import BreadCrumb from '../../../Components/Common/BreadCrumb'; // Import Code Components import { DefaultAlertsExample, BorderlessExample, DismissingExample, LinkColorExample, LiveExample, OutlineAlertsExample, LeftBorderAlertsExample, LabelIconAlertsExample, TopBarAlertsExample, LabelIconArrowAlertsExample, RoundedLabelIconAlertsExample, AdditionalContentAlertsExample, SolidAlertsExample } from './UiAlertsCode'; import { Head, Link } from '@inertiajs/react'; import Layout from '../../../Layouts'; interface AlertProps { variant: string, name: string, discription: string } const UiAlerts = () => { const [liveAlertPlaceholder, setLiveAlertPlaceholder] = useState(false); const alert: AlertProps[] = [ { variant: "primary", name: "Primary", discription: ` Hi! A simple Dismissible Primary alert —check it out!` }, { variant: "secondary", name: "Secondary", discription: ` How are you! A simple Dismissible secondary alert —check it out!`, }, { variant: "success", name: "Success", discription: ` Yey! Everything worked! A simple Dismissible success alert —check it out!` }, { variant: "danger", name: "Danger", discription: ` Something is very wrong! A simple Dismissible danger alert —check it out!` }, { variant: "warning", name: "Warning", discription: ` Uh oh, something went wrong A simple Dismissible warning alert —check it out!` }, { variant: "info", name: "Info", discription: ` Don't forget' it ! A simple Dismissible info alert —check it out!` }, { variant: "light", name: "Light", discription: `Mind Your Step! A simple Dismissible light alert —check it out!` }, { variant: "dark", name: "Dark", discription: ` Did you know? A simple Dismissible dark alert —check it out!` }, ]; return (

Use the Alert tag to show a default alert.

Primary Alert
Hi! A simple Primary alert —check it out!
Secondary Alert
How are you! A simple secondary alert —check it out!
Success Alert
Yey! Everything worked! A simple success alert —check it out!
Danger Alert
Something is very wrong! A simple danger alert —check it out!
Warning Alert
Uh oh, something went wrong A simple warning alert —check it out!
Info Alert
Don't forget' it ! A simple info alert —check it out!
Light Alert
Mind Your Step! A simple light alert —check it out!
Dark Alert
Did you know? A simple dark alert —check it out!

Use the border-0 class to set alert without border.

Primary Alert
Hi! A simple Primary alert —check it out!
Secondary Alert
How are you! A simple secondary alert —check it out!
Success Alert
Yey! Everything worked! A simple success alert —check it out!
Danger Alert
Something is very wrong! A simple danger alert—check it out!
Warning Alert
Uh oh, something went wrong A simple warning alert —check it out!
Info Alert
Don't forget' it ! A simple info alert —check it out!
Light Alert
Mind Your Step! A simple light alert —check it out!
Dark Alert
Did you know? A simple dark alert —check it out!

Use the UncontrolledAlert tag to add dismissing button to the alert.

{(alert || []).slice(0, 4).map((value: AlertProps, inx: number) => (
{value.name} Alert
{/*

Use the alert-link class at <a> tag to show matching colored links within the given alert.

Primary Alert
A simple Primary alert with an example link. Give it a click if you like.
Secondary Alert
A simple Secondary alert with an example link. Give it a click if you like.
Success Alert
A simple Success alert with an example link. Give it a click if you like.
Danger Alert
A simple Danger alert with an example link. Give it a click if you like.
Warning Alert
A simple Warning alert with an example link. Give it a click if you like.
Info Alert
A simple Info alert with an example link. Give it a click if you like.
Light Alert
A simple Light alert with an example link. Give it a click if you like.
Dark Alert
A simple Dark alert with an example link. Give it a click if you like.

Click the Show live alert button to show an alert on button click.

setLiveAlertPlaceholder(!liveAlertPlaceholder)} dismissible> Nice, you triggered this alert message!

Use the border-2 bg-body-secondary class to set an alert with outline.

Primary Outline Alert
Hi! - Outline primary alert example
Secondary Outline Alert
How are you! - Outline secondary alert example
Success Outline Alert
Yey! Everything worked! - Outline success alert example
Danger Outline Alert
Something is very wrong! - Outline danger alert example
Warning Outline Alert
Uh oh, something went wrong! - Outline warning alert example
Info Outline Alert
Don't forget' it ! - Outline info alert example
Dark Alert
Did you know? - Outline dark alert example

Use the alert-border-left class to set an alert with the left border.

Primary Alert
Primary - Left border alert
Secondary Alert
Secondary - Left border alert
Success Alert
Success - Left border alert
Danger Alert
Danger - Left border alert
Warning Alert
Warning - Left border alert
Info Alert
Info - Left border alert
Light Alert
Light - Left border alert
Dark Alert
Dark - Left border alert

Use the alert-label-icon class to set an alert with a label icon.

Primary Alert
Primary - Label icon alert
Secondary Alert
Secondary - Label icon alert
Success Alert
Success - Label icon alert
Danger Alert
Danger - Label icon alert
Warning Alert
Warning - Label icon alert
Info Alert
Info - Label icon alert
Light Alert
Light - Label icon alert
Dark Alert
Dark - Label icon alert

Use the alert-additional class and Use the alert- class to HTML elements like headings, paragraphs, dividers etc.

Primary Alert
Well done !

Aww yeah, you successfully read this important alert message.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Danger Alert
Something is very wrong!

Change a few things up and try submitting again.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Success Alert
Yey! Everything worked!

This alert needs your attention, but it's not super important.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Warning Alert
Uh oh, something went wrong!

Better check yourself, you're not looking too good.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Use the alert-top-border class to set an alert with the top border and outline.

Primary Alert
Primary - Top border alert
Secondary Alert
Secondary - Top border alert
Success Alert
Success - Top border alert
Danger Alert
Danger - Top border alert
Warning Alert
Warning - Top border alert
Info Alert
Info - Top border alert
Light Alert
Light - Top border alert
Dark Alert
Dark - Top border alert

Use the alert-label-icon label-arrow class to show an alert with label icon and arrow.

Primary Alert
Primary - Label icon arrow alert
Secondary Alert
Secondary - Label icon arrow alert
Success Alert
Success - Label icon arrow alert
Danger Alert
Danger - Label icon arrow alert
Warning Alert
Warning - Label icon arrow alert
Info Alert
Info - Label icon arrow alert
Light Alert
Light - Label icon arrow alert
Dark Alert
Dark - Label icon arrow alert

Use the alert-label-icon rounded-label class to set an alert with a rounded label icon.

Primary Alert
Primary - Rounded label alert
Secondary Alert
Secondary- Rounded label alert
Success Alert
Success- Rounded label alert
Danger Alert
Danger- Rounded label alert
Warning Alert
Warning - Rounded label alert
Info Alert
Info - Rounded label alert
Light Alert
Light - Rounded label alert
Dark Alert
Dark - Rounded label alert

Use the alert-solid class to set an alert with solid style.

Primary Solid Alert
Hi! - Solid primary alert example
Secondary Solid Alert
How are you! - Solid secondary alert example
Success Solid Alert
Yey! Everything worked! - Solid success alert example
Danger Solid Alert
Something is very wrong! - Solid danger alert example
Warning Solid Alert
Uh oh, something went wrong! - Solid warning alert example
Info Solid Alert
Don't forget' it ! - Solid info alert example
Light Solid Alert
Mind Your Step! - Solid secondary alert example
Dark Solid Alert
Did you know? - Solid dark alert example
); }; UiAlerts.layout = (page:any) => export default UiAlerts;