Displays a callout for user attention, such as a success message, warning, or error.
<div class="space-y-5">
<div class="kt-alert" id="alert_1">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info text-muted-foreground"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a default alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined">Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-primary" id="alert_2">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a primary alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined kt-link-inverse">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-success" id="alert_3">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a success alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined kt-link-inverse">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-info" id="alert_4">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is an info alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined kt-link-inverse">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-destructive" id="alert_5">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a destructive alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined kt-link-inverse">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_5">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-warning" id="alert_6">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a warning alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined kt-link-inverse">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_6">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-mono" id="alert_7">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a mono alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined kt-link-inverse">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_7">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="space-y-5">
<div class="kt-alert kt-alert-mono kt-alert-primary" id="alert_1">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a primary alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-mono kt-alert-success" id="alert_2">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a success alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-mono kt-alert-info" id="alert_3">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is an info alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-mono kt-alert-destructive" id="alert_4">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a destructive alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-mono kt-alert-warning" id="alert_5">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a warning alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_5">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="space-y-5">
<div class="kt-alert kt-alert-outline kt-alert-primary" id="alert_1">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a primary alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-outline kt-alert-success" id="alert_2">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a success alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-outline kt-alert-info" id="alert_3">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is an info alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-outline kt-alert-destructive" id="alert_4">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a destructive alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-outline kt-alert-warning" id="alert_5">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a warning alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button
class="kt-link kt-link-xs kt-link-underlined text-mono-foreground"
>
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_5">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="space-y-5">
<div class="kt-alert kt-alert-light kt-alert-primary" id="alert_1">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a primary alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined text-mono">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-light kt-alert-success" id="alert_2">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a success alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined text-mono">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-light kt-alert-info" id="alert_3">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is an info alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined text-mono">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-light kt-alert-destructive" id="alert_4">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a destructive alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined text-mono">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-light kt-alert-warning" id="alert_5">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a warning alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined text-mono">
Upgrade</button
><button class="kt-alert-close" data-kt-dismiss="#alert_5">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="space-y-5">
<div
class="kt-alert kt-alert-outline kt-alert-primary kt-alert-sm"
id="alert_1"
>
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a small alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-alert-close" data-kt-dismiss="#alert_1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="kt-alert kt-alert-outline kt-alert-primary" id="alert_2">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a default alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-alert-close" data-kt-dismiss="#alert_2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div
class="kt-alert kt-alert-outline kt-alert-primary kt-alert-lg"
id="alert_3"
>
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</div>
<div class="kt-alert-title">This is a large alert</div>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-alert-close" data-kt-dismiss="#alert_3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="space-y-5">
<div class="kt-alert kt-alert-outline" id="alert_1">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-triangle-alert"
aria-hidden="true"
>
<path
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<div class="kt-alert-content">
<h3 class="kt-alert-title">Example Alert Title</h3>
<p class="kt-alert-description">
Insert the alert description here. It would look better as two lines of
text.
</p>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined text-mono">
Upgrade</button
><button class="kt-link kt-link-xs text-mono">Dismiss</button>
</div>
</div>
</div>
<button class="kt-alert-close" data-kt-dismiss="#alert_1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="kt-alert kt-alert-outline kt-alert-destructive" id="alert_2">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-triangle-alert"
aria-hidden="true"
>
<path
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<div class="kt-alert-content">
<h3 class="kt-alert-title">Example Alert Title</h3>
<p class="kt-alert-description">
Insert the alert description here. It would look better as two lines of
text.
</p>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined text-mono">
Upgrade</button
><button class="kt-link kt-link-xs text-mono">Dismiss</button>
</div>
</div>
</div>
<button class="kt-alert-close" data-kt-dismiss="#alert_2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="kt-alert kt-alert-outline kt-alert-warning" id="alert_3">
<div class="kt-alert-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-triangle-alert"
aria-hidden="true"
>
<path
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<div class="kt-alert-content">
<h3 class="kt-alert-title">Example Alert Title</h3>
<p class="kt-alert-description">
Insert the alert description here. It would look better as two lines of
text.
</p>
<div class="kt-alert-toolbar">
<div class="kt-alert-actions">
<button class="kt-link kt-link-xs kt-link-underlined text-mono">
Upgrade</button
><button class="kt-link kt-link-xs text-mono">Dismiss</button>
</div>
</div>
</div>
<button class="kt-alert-close" data-kt-dismiss="#alert_3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>