Introduction Quickstart License Ng Primitives
Theming Override base style Use custom style Dark mode
Accordion Alert Badge Breadcrumb Button Card Clipboard Dropdown Icon Indicator Input field Modal Navbar Pagination Sidebar Tab Table Tooltip
API Reference
Components Alert

Alert

Default alert

default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript 
<div flowbiteAlert>
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">default alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="info">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">info alert!</span> Change a few things up and try submitting again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="failure">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">failure alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="warning">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">warning alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="success">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">success alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="primary">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">primary alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>

Alert with icon

default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript 
<div flowbiteAlert>
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span class="font-medium">default alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="info">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span class="font-medium">info alert!</span> Change a few things up and try submitting again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="failure">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span class="font-medium">failure alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="warning">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span class="font-medium">warning alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="success">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span class="font-medium">success alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  color="failure">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span class="font-medium">primary alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>

Bordered alert

default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript 
<div
  flowbiteAlert
  border>
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">default alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  color="info">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">info alert!</span> Change a few things up and try submitting again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  color="failure">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">failure alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  color="warning">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">warning alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  color="success">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">success alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  color="primary">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">primary alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>

Dismissable alert

default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript 
<div flowbiteAlert>
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span>
        <span class="font-medium">default alert!</span> Change a few things up and try submitting
        again.
      </span>
    </span>
    <button
      flowbiteAlertButton
      (click)="onDismiss()">
      <flowbite-icon
        name="close"
        class="size-5 stroke-2" />
    </button>
  </div>
</div>
<div
  flowbiteAlert
  color="info">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span>
        <span class="font-medium">info alert!</span> Change a few things up and try submitting
        again.
      </span>
    </span>
    <button
      flowbiteAlertButton
      (click)="onDismiss()">
      <flowbite-icon
        name="close"
        class="size-5 stroke-2" />
    </button>
  </div>
</div>
<div
  flowbiteAlert
  color="failure">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span>
        <span class="font-medium">failure alert!</span> Change a few things up and try submitting
        again.
      </span>
    </span>
    <button
      flowbiteAlertButton
      (click)="onDismiss()">
      <flowbite-icon
        name="close"
        class="size-5 stroke-2" />
    </button>
  </div>
</div>
<div
  flowbiteAlert
  color="warning">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span>
        <span class="font-medium">warning alert!</span> Change a few things up and try submitting
        again.
      </span>
    </span>
    <button
      flowbiteAlertButton
      (click)="onDismiss()">
      <flowbite-icon
        name="close"
        class="size-5 stroke-2" />
    </button>
  </div>
</div>
<div
  flowbiteAlert
  color="success">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span>
        <span class="font-medium">success alert!</span> Change a few things up and try submitting
        again.
      </span>
    </span>
    <button
      flowbiteAlertButton
      (click)="onDismiss()">
      <flowbite-icon
        name="close"
        class="size-5 stroke-2" />
    </button>
  </div>
</div>
<div
  flowbiteAlert
  color="primary">
  <div flowbiteAlertContent>
    <span class="inline-flex items-center gap-2">
      <flowbite-icon
        name="infoCircle"
        class="size-5 stroke-2" />
      <span>
        <span class="font-medium">primary alert!</span> Change a few things up and try submitting
        again.
      </span>
    </span>
    <button
      flowbiteAlertButton
      (click)="onDismiss()">
      <flowbite-icon
        name="close"
        class="size-5 stroke-2" />
    </button>
  </div>
</div>

Border accent

default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript 
<div
  flowbiteAlert
  border
  accent>
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">default alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  accent
  color="info">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">info alert!</span> Change a few things up and try submitting again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  accent
  color="failure">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">failure alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  accent
  color="warning">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">warning alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  accent
  color="success">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">success alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>
<div
  flowbiteAlert
  border
  accent
  color="primary">
  <div flowbiteAlertContent>
    <span>
      <span class="font-medium">primary alert!</span> Change a few things up and try submitting
      again.
    </span>
  </div>
</div>

Themes

Alert theme

{
  "host": {
    "base": "mb-4 rounded-lg p-4",
    "transition": "",
    "color": {
      "default": {
        "light": "border-gray-200 bg-gray-50",
        "dark": "dark:border-gray-700 dark:bg-gray-950"
      },
      "info": {
        "light": "border-blue-200 bg-blue-50",
        "dark": "dark:border-blue-700 dark:bg-blue-950"
      },
      "failure": {
        "light": "border-red-200 bg-red-50",
        "dark": "dark:border-red-700 dark:bg-red-950"
      },
      "success": {
        "light": "border-green-200 bg-green-50",
        "dark": "dark:border-green-700 dark:bg-green-950"
      },
      "warning": {
        "light": "border-yellow-200 bg-yellow-50",
        "dark": "dark:border-yellow-700 dark:bg-yellow-950"
      },
      "primary": {
        "light": "bg-primary-50 border-primary-200",
        "dark": "dark:bg-primary-950 dark:border-primary-700"
      }
    },
    "border": {
      "on": "border",
      "off": "border-0"
    },
    "accent": {
      "on": "border-t-4",
      "off": ""
    }
  }
}

Alert content theme

{
  "host": {
    "base": "flex items-center justify-between text-sm font-normal",
    "transition": "",
    "color": {
      "default": {
        "light": "text-gray-800",
        "dark": "dark:text-gray-300"
      },
      "info": {
        "light": "text-blue-800",
        "dark": "dark:text-blue-300"
      },
      "failure": {
        "light": "text-red-800",
        "dark": "dark:text-red-300"
      },
      "success": {
        "light": "text-green-800",
        "dark": "dark:text-green-300"
      },
      "warning": {
        "light": "text-yellow-800",
        "dark": "dark:text-yellow-300"
      },
      "primary": {
        "light": "text-primary-800",
        "dark": "dark:text-primary-300"
      }
    }
  }
}

Alert button theme

{
  "host": {
    "base": "flex rounded-lg p-1 first:mr-2 data-hover:cursor-pointer",
    "transition": "",
    "color": {
      "default": {
        "light": "data-hover:bg-gray-300",
        "dark": "dark:data-hover:bg-gray-600"
      },
      "info": {
        "light": "data-hover:bg-blue-300",
        "dark": "dark:data-hover:bg-blue-700"
      },
      "failure": {
        "light": "data-hover:bg-red-300",
        "dark": "dark:data-hover:bg-red-700"
      },
      "success": {
        "light": "data-hover:bg-green-300",
        "dark": "dark:data-hover:bg-green-600"
      },
      "warning": {
        "light": "data-hover:bg-yellow-300",
        "dark": "dark:data-hover:bg-yellow-600"
      },
      "primary": {
        "light": "data-hover:bg-primary-300",
        "dark": "dark:data-hover:bg-primary-700"
      }
    }
  }
}
Previous
Accordion
Next
Badge
Flowbite Logo Flowbite

© 2019-2025 Flowbite™ is a registered trademark. All Rights Reserved.