Alert
Basic Usage
This is a default alert
This is a primary alert
This is a success alert
This is an info alert
This is a destructive alert
This is a warning alert
This is a mono alert
<div class="space-y-5">
<div class="mv-alert" id="alert_1">
<div class="mv-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="mv-alert-title">This is a default alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined">Upgrade</button
><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-primary" id="alert_2">
<div class="mv-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="mv-alert-title">This is a primary alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined mv-link-inverse">
Upgrade</button
><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-success" id="alert_3">
<div class="mv-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="mv-alert-title">This is a success alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined mv-link-inverse">
Upgrade</button
><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-info" id="alert_4">
<div class="mv-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="mv-alert-title">This is an info alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined mv-link-inverse">
Upgrade</button
><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-destructive" id="alert_5">
<div class="mv-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="mv-alert-title">This is a destructive alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined mv-link-inverse">
Upgrade</button
><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-warning" id="alert_6">
<div class="mv-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="mv-alert-title">This is a warning alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined mv-link-inverse">
Upgrade</button
><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-mono" id="alert_7">
<div class="mv-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="mv-alert-title">This is a mono alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined mv-link-inverse">
Upgrade</button
><button class="mv-alert-close" data-mv-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>
Mono
This is a primary alert
This is a success alert
This is an info alert
This is a destructive alert
This is a warning alert
<div class="space-y-5">
<div class="mv-alert mv-alert-mono mv-alert-primary" id="alert_1">
<div class="mv-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="mv-alert-title">This is a primary alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-mono mv-alert-success" id="alert_2">
<div class="mv-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="mv-alert-title">This is a success alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-mono mv-alert-info" id="alert_3">
<div class="mv-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="mv-alert-title">This is an info alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-mono mv-alert-destructive" id="alert_4">
<div class="mv-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="mv-alert-title">This is a destructive alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-mono mv-alert-warning" id="alert_5">
<div class="mv-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="mv-alert-title">This is a warning alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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>Outline
This is a primary alert
This is a success alert
This is an info alert
This is a destructive alert
This is a warning alert
<div class="space-y-5">
<div class="mv-alert mv-alert-outline mv-alert-primary" id="alert_1">
<div class="mv-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="mv-alert-title">This is a primary alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-outline mv-alert-success" id="alert_2">
<div class="mv-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="mv-alert-title">This is a success alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-outline mv-alert-info" id="alert_3">
<div class="mv-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="mv-alert-title">This is an info alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-outline mv-alert-destructive" id="alert_4">
<div class="mv-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="mv-alert-title">This is a destructive alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-outline mv-alert-warning" id="alert_5">
<div class="mv-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="mv-alert-title">This is a warning alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono-foreground">
Upgrade</button><button class="mv-alert-close" data-mv-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>Light
This is a primary alert
This is a success alert
This is an info alert
This is a destructive alert
This is a warning alert
<div class="space-y-5">
<div class="mv-alert mv-alert-light mv-alert-primary" id="alert_1">
<div class="mv-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="mv-alert-title">This is a primary alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-light mv-alert-success" id="alert_2">
<div class="mv-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="mv-alert-title">This is a success alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-light mv-alert-info" id="alert_3">
<div class="mv-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="mv-alert-title">This is an info alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-light mv-alert-destructive" id="alert_4">
<div class="mv-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="mv-alert-title">This is a destructive alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono">
Upgrade</button><button class="mv-alert-close" data-mv-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="mv-alert mv-alert-light mv-alert-warning" id="alert_5">
<div class="mv-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="mv-alert-title">This is a warning alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono">
Upgrade</button><button class="mv-alert-close" data-mv-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>Size
This is a small alert
This is a default alert
This is a large alert
<div class="space-y-5">
<div class="mv-alert mv-alert-outline mv-alert-primary mv-alert-sm" id="alert_1">
<div class="mv-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="mv-alert-title">This is a small alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-alert-close" data-mv-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="mv-alert mv-alert-outline mv-alert-primary" id="alert_2">
<div class="mv-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="mv-alert-title">This is a default alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-alert-close" data-mv-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="mv-alert mv-alert-outline mv-alert-primary mv-alert-lg" id="alert_3">
<div class="mv-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="mv-alert-title">This is a large alert</div>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-alert-close" data-mv-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>Actions
Example Alert Title
Insert the alert description here. It would look better as two lines of text.
Example Alert Title
Insert the alert description here. It would look better as two lines of text.
Example Alert Title
Insert the alert description here. It would look better as two lines of text.
<div class="space-y-5">
<div class="mv-alert mv-alert-outline" id="alert_1">
<div class="mv-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="mv-alert-content">
<h3 class="mv-alert-title">Example Alert Title</h3>
<p class="mv-alert-description">
Insert the alert description here. It would look better as two lines of
text.
</p>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono">
Upgrade</button><button class="mv-link mv-link-xs text-mono">Dismiss</button>
</div>
</div>
</div>
<button class="mv-alert-close" data-mv-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="mv-alert mv-alert-outline mv-alert-destructive" id="alert_2">
<div class="mv-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="mv-alert-content">
<h3 class="mv-alert-title">Example Alert Title</h3>
<p class="mv-alert-description">
Insert the alert description here. It would look better as two lines of
text.
</p>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono">
Upgrade</button><button class="mv-link mv-link-xs text-mono">Dismiss</button>
</div>
</div>
</div>
<button class="mv-alert-close" data-mv-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="mv-alert mv-alert-outline mv-alert-warning" id="alert_3">
<div class="mv-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="mv-alert-content">
<h3 class="mv-alert-title">Example Alert Title</h3>
<p class="mv-alert-description">
Insert the alert description here. It would look better as two lines of
text.
</p>
<div class="mv-alert-toolbar">
<div class="mv-alert-actions">
<button class="mv-link mv-link-xs mv-link-underlined text-mono">
Upgrade</button><button class="mv-link mv-link-xs text-mono">Dismiss</button>
</div>
</div>
</div>
<button class="mv-alert-close" data-mv-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>