Alert

<flowbite-alert color="primary">
  <span class="font-medium">primary alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert color="dark">
  <span class="font-medium">Dark alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert color="blue">
  <span class="font-medium">blue alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert color="red">
  <span class="font-medium">red alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert color="green">
  <span class="font-medium">green alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert color="yellow">
  <span class="font-medium">yellow alert !</span> Change a few things up and try submitting again.
</flowbite-alert>

<flowbite-alert
  [icon]="icon"
  color="primary">
  <span class="font-medium">Primary alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [icon]="icon"
  color="dark">
  <span class="font-medium">Dark alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [icon]="icon"
  color="blue">
  <span class="font-medium">blue alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [icon]="icon"
  color="red">
  <span class="font-medium">red alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [icon]="icon"
  color="green">
  <span class="font-medium">green alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [icon]="icon"
  color="yellow">
  <span class="font-medium">yellow alert !</span> Change a few things up and try submitting again.
</flowbite-alert>

<ng-template #icon>
  <flowbite-icon
    svgIcon="outline:info-circle"
    class="mr-3 inline h-5 w-5 flex-shrink-0" />
</ng-template>

<flowbite-alert
  [hasBorder]="true"
  color="primary">
  <span class="font-medium">Primary alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorder]="true"
  color="dark">
  <span class="font-medium">Dark alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorder]="true"
  color="blue">
  <span class="font-medium">blue alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorder]="true"
  color="red">
  <span class="font-medium">red alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorder]="true"
  color="green">
  <span class="font-medium">green alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorder]="true"
  color="yellow">
  <span class="font-medium">yellow alert !</span> Change a few things up and try submitting again.
</flowbite-alert>

<flowbite-alert
  [isDismissable]="true"
  [onDismiss]="onDismiss"
  color="primary">
  <span class="font-medium">Primary alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [isDismissable]="true"
  [onDismiss]="onDismiss"
  color="dark">
  <span class="font-medium">Dark alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [isDismissable]="true"
  [onDismiss]="onDismiss"
  color="blue">
  <span class="font-medium">blue alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [isDismissable]="true"
  [onDismiss]="onDismiss"
  color="red">
  <span class="font-medium">red alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [isDismissable]="true"
  [onDismiss]="onDismiss"
  color="green">
  <span class="font-medium">green alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [isDismissable]="true"
  [onDismiss]="onDismiss"
  color="yellow">
  <span class="font-medium">yellow alert !</span> Change a few things up and try submitting again.
</flowbite-alert>

<flowbite-alert
  [hasBorderAccent]="true"
  color="primary">
  <span class="font-medium">Primary alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorderAccent]="true"
  color="dark">
  <span class="font-medium">Dark alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorderAccent]="true"
  color="blue">
  <span class="font-medium">blue alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorderAccent]="true"
  color="red">
  <span class="font-medium">red alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorderAccent]="true"
  color="green">
  <span class="font-medium">green alert !</span> Change a few things up and try submitting again.
</flowbite-alert>
<flowbite-alert
  [hasBorderAccent]="true"
  color="yellow">
  <span class="font-medium">yellow alert !</span> Change a few things up and try submitting again.
</flowbite-alert>

<flowbite-alert
  color="primary"
  [additionalContent]="primaryAdditionalContent">
  <h3 class="text-lg font-medium">This is an primary alert</h3>
</flowbite-alert>
<flowbite-alert
  color="dark"
  [additionalContent]="darkAdditionalContent">
  <h3 class="text-lg font-medium">This is an dark alert</h3>
</flowbite-alert>
<flowbite-alert
  color="blue"
  [additionalContent]="blueAdditionalContent">
  <h3 class="text-lg font-medium">This is an blue alert</h3>
</flowbite-alert>
<flowbite-alert
  color="red"
  [additionalContent]="redAdditionalContent">
  <h3 class="text-lg font-medium">This is an red alert</h3>
</flowbite-alert>
<flowbite-alert
  color="green"
  [additionalContent]="greenAdditionalContent">
  <h3 class="text-lg font-medium">This is an green alert</h3>
</flowbite-alert>
<flowbite-alert
  color="yellow"
  [additionalContent]="yellowAdditionalContent">
  <h3 class="text-lg font-medium">This is an yellow alert</h3>
</flowbite-alert>

<ng-template #primaryAdditionalContent>
  <div class="mt-2 mb-4 text-sm">
    More blue about this blue alert goes here. This example text is going to run a bit longer so
    that you can see how spacing within an alert works with this kind of content.
  </div>
  <div class="flex">
    <flowbite-button
      color="primary"
      class="mr-2"
      size="xs">
      <flowbite-icon
        svgIcon="outline:eye"
        class="-ml-0.5 mr-2 h-4 w-4" />
      View more
    </flowbite-button>
    <flowbite-button
      color="primary"
      fill="outline"
      size="xs">
      Dismiss
    </flowbite-button>
  </div>
</ng-template>
<ng-template #darkAdditionalContent>
  <div class="mt-2 mb-4 text-sm">
    More blue about this blue alert goes here. This example text is going to run a bit longer so
    that you can see how spacing within an alert works with this kind of content.
  </div>
  <div class="flex">
    <flowbite-button
      color="dark"
      class="mr-2"
      size="xs">
      <flowbite-icon
        svgIcon="outline:eye"
        class="-ml-0.5 mr-2 h-4 w-4" />
      View more
    </flowbite-button>
    <flowbite-button
      color="dark"
      fill="outline"
      size="xs">
      Dismiss
    </flowbite-button>
  </div>
</ng-template>
<ng-template #blueAdditionalContent>
  <div class="mt-2 mb-4 text-sm">
    More blue about this blue alert goes here. This example text is going to run a bit longer so
    that you can see how spacing within an alert works with this kind of content.
  </div>
  <div class="flex">
    <flowbite-button
      color="blue"
      class="mr-2"
      size="xs">
      <flowbite-icon
        svgIcon="outline:eye"
        class="-ml-0.5 mr-2 h-4 w-4" />
      View more
    </flowbite-button>
    <flowbite-button
      color="blue"
      fill="outline"
      size="xs">
      Dismiss
    </flowbite-button>
  </div>
</ng-template>
<ng-template #redAdditionalContent>
  <div class="mt-2 mb-4 text-sm">
    More blue about this blue alert goes here. This example text is going to run a bit longer so
    that you can see how spacing within an alert works with this kind of content.
  </div>
  <div class="flex">
    <flowbite-button
      color="red"
      class="mr-2"
      size="xs">
      <flowbite-icon
        svgIcon="outline:eye"
        class="-ml-0.5 mr-2 h-4 w-4" />
      View more
    </flowbite-button>
    <flowbite-button
      color="red"
      fill="outline"
      size="xs">
      Dismiss
    </flowbite-button>
  </div>
</ng-template>
<ng-template #greenAdditionalContent>
  <div class="mt-2 mb-4 text-sm">
    More blue about this blue alert goes here. This example text is going to run a bit longer so
    that you can see how spacing within an alert works with this kind of content.
  </div>
  <div class="flex">
    <flowbite-button
      color="green"
      class="mr-2"
      size="xs">
      <flowbite-icon
        svgIcon="outline:eye"
        class="-ml-0.5 mr-2 h-4 w-4" />
      View more
    </flowbite-button>
    <flowbite-button
      color="green"
      fill="outline"
      size="xs">
      Dismiss
    </flowbite-button>
  </div>
</ng-template>
<ng-template #yellowAdditionalContent>
  <div class="mt-2 mb-4 text-sm">
    More blue about this blue alert goes here. This example text is going to run a bit longer so
    that you can see how spacing within an alert works with this kind of content.
  </div>
  <div class="flex">
    <flowbite-button
      color="yellow"
      class="mr-2"
      size="xs">
      <flowbite-icon
        svgIcon="outline:eye"
        class="-ml-0.5 mr-2 h-4 w-4" />
      View more
    </flowbite-button>
    <flowbite-button
      color="yellow"
      fill="outline"
      size="xs">
      Dismiss
    </flowbite-button>
  </div>
</ng-template>