Alert | Hybrix - Admin & Dashboard Template

Alerts

Default Alerts

Use the alert class 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!

Next.js Preview

Borderless Alerts

Use the alert-borderless 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!

Next.js Preview

Dismissing Alerts

Use the alert-dismissible class to add dismissing button to the alert.

Primary Alert

Hi! A simple Dismissible primary Alert — check it out!

Secondary Alert

How are you! A simple Dismissible secondary alert —check it out!

Success Alert

Right Way ! A simple Dismissible success alert —check it out!

Danger Alert

Something is very wrong! A simple Dismissible danger alert —check it out!

Warning Alert

Welcome Back! A simple Dismissible warning alert —check it out!

Info Alert

Don't forget' it ! A simple Dismissible info alert —check it out!

Light Alert

Mind Your Step! A simple Dismissible light alert —check it out!

Dark Alert

Did you know? A simple Dismissible dark alert —check it out!

Next.js Preview

Link Color Alerts

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.

Next.js Preview

Live Alert Example

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

Next.js Preview

Outline Alerts

Use the alert-outline 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

Next.js Preview

Left Border Alerts

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

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

Next.js Preview

Modern Alerts

Use the alert-modern class to set an alert modern.

Primary Alert

This is a information. You should do something about it.

Secondary Alert

Secondary - Left border alert

Success Alert

Yay! Everything worked!

Danger Alert

This is error. You should do something about it.

Warning Alert

This is warning You should do something about it.

Info Alert

Info - Left border alert

Light Alert

Light - Left border alert

Dark Alert

Dark - Left border alert

Next.js Preview

Label Icon Alerts

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

Next.js Preview

Additional Content Alerts

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.

Next.js Preview

Top Border with Outline Alerts

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

Next.js Preview

Label Icon Arrow Alerts

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

Next.js Preview

Rounded Label Icon Alerts

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

Next.js Preview

Solid Alerts

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