Alert

import { BuiAlert, BuiAlertTitle, BuiAlertDescription } from 'ng-blatui';

<div buiAlert>
  <svg><!-- circle-check --></svg>
  <h5 buiAlertTitle>Success! Your changes have been saved</h5>
  <div buiAlertDescription>This is an alert with icon, title and description.</div>
</div>

<div buiAlert variant="destructive">
  <svg><!-- circle-alert --></svg>
  <h5 buiAlertTitle>Unable to process your payment.</h5>
  <div buiAlertDescription>Please verify your billing information and try again.</div>
</div>

<div buiAlert class="relative pe-10">
  <svg><!-- info --></svg>
  <h5 buiAlertTitle>Verify your email</h5>
  <button class="absolute top-3 right-3" aria-label="Dismiss" (click)="show.set(false)">✕</button>
</div>

<div buiAlert class="border-blue-200 bg-blue-50 text-blue-900 [&>svg]:text-blue-600">
  <svg><!-- info --></svg>
  <h5 buiAlertTitle>Heads up!</h5>
  <div buiAlertDescription>A new software update is available.</div>
</div>

<div buiAlert class="border-amber-200 bg-amber-50 text-amber-900 [&>svg]:text-amber-600">
  <svg><!-- triangle-alert --></svg>
  <h5 buiAlertTitle>Your subscription is expiring soon</h5>
</div>

<!-- tone="success | warning | danger | info | neutral" -->
<div buiAlert tone="success">…</div>
<div buiAlert tone="warning">…</div>
<div buiAlert tone="info">…</div>

<div buiAlert class="bg-success/10 text-success border-success rounded-md border-0 border-l-4">
  <svg><!-- icon --></svg>
  <h5 buiAlertTitle>Your request to join the team is approved.</h5>
</div>

<div buiAlert class="bg-primary text-primary-foreground border-none">
  <svg><!-- info --></svg>
  <h5 buiAlertTitle>Editing your profile</h5>
</div>

<div buiAlert>
  <svg><!-- terminal --></svg>
  <h5 buiAlertTitle>You can add components using the CLI.</h5>
</div>

<div buiAlert class="flex items-center justify-between gap-3">
  <div class="flex items-center gap-3">
    <bui-avatar class="size-9 rounded-md">SR</bui-avatar>
    <div><h5 buiAlertTitle>Sara replied to your photo</h5></div>
  </div>
  <button buiButton variant="outline" size="sm">View</button>
</div>

<div buiAlert class="border-2 bg-transparent"><svg><!-- icon --></svg>
  <p buiAlertTitle>Outline alert</p><p buiAlertDescription>Border-only.</p></div>

<div buiAlert class="border-0 bg-gradient-to-r from-primary/10 to-transparent">…</div>

<!-- force flex to override the default grid, icon in a filled box -->
<div buiAlert class="flex items-center gap-3">
  <span class="grid size-9 place-items-center rounded-md bg-primary/10 text-primary"><svg><!-- icon --></svg></span>
  <span><p buiAlertTitle>New message</p><p buiAlertDescription>…</p></span>
</div>