Alerts
Warning
Warning
Alert
Alert
Success
Success
Processing
Processing
Default alerts
Add className="alert alert-primary|secondary|success|info|warning|danger" use one of the required className.
Primary alert—At vero eos et accusamus praesentium!
Secondary alert—At vero eos et accusamus praesentium!
Success alert—At vero eos et accusamus praesentium!
Info alert—At vero eos et accusamus praesentium!
Warning alert—At vero eos et accusamus praesentium!
Danger alert—At vero eos et accusamus praesentium!
<React.Fragment>
{list.map((item, k) => (
<React.Fragment key={k}>
<Alert
className=""
variant={item.variant}
>
{" "}
{item.text}
</Alert>
</React.Fragment>
))}
</React.Fragment>
Links in alerts
Add .alert-link className to quickly provide matching colored links within any alert
Well done! this important alert message.
Well done! this important alert message.
Well done! this important alert message.
Heads up! This alert needs your attention,
Warning! Better check yourself, youre not looking too good.
Oh snap! Change a few things up and try submitting again.
export const LinkAlert = () => {
const [open, setOpen] = useState(false);
const [list, setList] = useState(LinkAlertList);
const handleRemove =(id)=> {
const newList = list.filter((lit) => lit.id !== id);
setList(newList);
}
return (
<React.Fragment>
{list.map((item, k) => (
<React.Fragment key={k}>
<Alert variant={item.variant} className="alert-dismissible">
<strong>{item.show}</strong> {item.text} <Alert.Link href="#!" className="alert-link">{item.text2}</Alert.Link>
<span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
</Alert>
</React.Fragment>
))}
</React.Fragment>
);
};
Alert with icon
Add .alert-icon className.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap!Change a few things up and try submitting again.
export const LinkAlert = () => {
const [open, setOpen] = useState(false);
const [list, setList] = useState(LinkAlertList);
const handleRemove =(id)=> {
const newList = list.filter((lit) => lit.id !== id);
setList(newList);
}
return (
<React.Fragment>
{list.map((item, k) => (
<React.Fragment key={k}>
<Alert variant={item.variant} className="alert-dismissible">
<strong>{item.show}</strong> {item.text} <Alert.Link href="#!" className="alert-link">{item.text2}</Alert.Link>
<span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
</Alert>
</React.Fragment>
))}
</React.Fragment>
);
};
Alert with avatar
Add .alert-avatar className.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
export const LinkAlert = () => {
const [open, setOpen] = useState(false);
const [list, setList] = useState(AvatarList);
const handleRemove =(id)=> {
const newList = list.filter((lit) => lit.id !== id);
setList(newList);
}
return (
<React.Fragment>
{list.map((item, k) => (
<React.Fragment key={k}>
<Alert variant={item.variant} className={item.classname}>
<img className="avatar brround cover-image" alt='' src={item.pic} /> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
</Alert>
</React.Fragment>
))}
</React.Fragment>
);
};
Alerts With Icons
Add .alert-avatar className.
Default! This is a warning alert—check it out that has an icon too!
Primary! This is a warning alert—check it out that has an icon too!
Success! This is a warning alert—check it out that has an icon too!
Info! This is a warning alert—check it out that has an icon too!
Warning! This is a warning alert—check it out that has an icon too!
Danger! This is a warning alert—check it out that has an icon too!
export const LinkAlert = () => {
const [open, setOpen] = useState(false);
const [list, setList] = useState(AlertList);
const handleRemove =(id)=> {
const newList = list.filter((lit) => lit.id !== id);
setList(newList);
}
return (
<React.Fragment>
{list.map((item, k) => (
<React.Fragment key={k}>
<Alert className={item.classname} variant={item.variant} >
<span className="alert-inner--icon">{item.icon}</span>
<span className="alert-inner--text"><strong>{item.show}</strong> This is a default alert—check it out!</span>
<span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
</Alert>
</React.Fragment>
))}
</React.Fragment>
);
};
Alerts With Icons Dismissing
Add .alert-dismissible className.
Default! This is a default alert—check it out!
Primary! This is a default alert—check it out!
Success! This is a default alert—check it out!
Info! This is a default alert—check it out!
Warning! This is a default alert—check it out!
Danger! This is a default alert—check it out!
export const LinkAlert = () => {
const [open, setOpen] = useState(false);
const [list, setList] = useState(AlertList);
const handleRemove =(id)=> {
const newList = list.filter((lit) => lit.id !== id);
setList(newList);
}
return (
<React.Fragment>
{list.map((item, k) => (
<React.Fragment key={k}>
<Alert className={item.classname} variant={item.variant} >
<span className="alert-inner--icon">{item.icon}</span>
<span className="alert-inner--text"><strong>{item.show}</strong> This is a default alert—check it out!</span>
<span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
</Alert>
</React.Fragment>
))}
</React.Fragment>
);
};
Alerts style
Success message
You successfully read this important alert message.
Info message
This alert needs your attention, but it's not super important.
Warning message
Best check yo self, you're not looking too good
Danger message
Change a few things up and try submitting again.
export const LinkAlert = () => {
const [open, setOpen] = useState(false);
const [list, setList] = useState(AlertList);
const handleRemove =(id)=> {
const newList = list.filter((lit) => lit.id !== id);
setList(newList);
}
return (
<React.Fragment>
{list.map((item, k) => (
<React.Fragment key={k}>
<Alert key={item.id} variant={{item.color}} onClick={() => handleRemove(item.id)} show={show}>
{item.icon}
<strong>{item.Title}</strong>
<span className="d-flex ms-auto" onClick={() => handleRemove(item.id)} ><i className={{item.color} fe fe-x ms-auto} ></i></span>
<hr />
<p>{item.description}</p>
</Alert>
</React.Fragment>
))}
</React.Fragment>
);
};
