Alert

Displays a short, important message to attract the user's attention without interrupting their task.

New Feature Added

A new feature has been added to the project.

Alert Danger

New Feature Added

A new feature has been added to the project.

Alert With Only Title

New Feature Added

Alert With Title And Icon

New Feature Added

Alert With Only Description

A new feature has been added to the project.

Alert With Description And Icon

A new feature has been added to the project.

Alert Structure

<!-- ------------------------------- DEFAULT ------------------------------- -->
<!-- Alert -->
<div class="relative w-full max-w-lg rounded-lg border border-main-border px-3 py-4 text-main-text"></div>
 
<!-- Alert Icon -->
<span
  class="translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-5 [&>svg]:text-main-text"></span>
 
<!-- Alert Title -->
<h5 class="w-full pl-8 text-base font-semibold leading-none">Alert Title</h5>
 
<!-- Alert Description -->
<p class="mt-1 pl-8 text-sm text-muted-text">Alert Description</p>

Previous

Accordion

Next

AlertDialog

On this page