Alerts

<x-alert color="info" title="Notice">A new version is available.</x-alert>
<x-alert color="success" title="Saved">Your data was saved successfully.</x-alert>
<x-alert color="warning" title="Careful">Storage usage is above 80%.</x-alert>
<x-alert color="error" title="Error">Connection failed. Please try again.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-100 text-base-content tune-border border-base-content/10 border-l-4 border-l-info" role="alert">
<div class="shrink-0 mt-0.5 text-info">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Notice
        </p>
<div class="mt-1">
            A new version is available.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-100 text-base-content tune-border border-base-content/10 border-l-4 border-l-success" role="alert">
<div class="shrink-0 mt-0.5 text-success">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Saved
        </p>
<div class="mt-1">
            Your data was saved successfully.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-100 text-base-content tune-border border-base-content/10 border-l-4 border-l-warning" role="alert">
<div class="shrink-0 mt-0.5 text-warning">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<path stroke="currentColor" stroke-width="1.5" d="M5.312 10.762C8.23 5.587 9.689 3 12 3s3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022z"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 8v5"></path>
<circle cx="12" cy="16" r="1" fill="currentColor"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Careful
        </p>
<div class="mt-1">
            Storage usage is above 80%.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-100 text-base-content tune-border border-base-content/10 border-l-4 border-l-error" role="alert">
<div class="shrink-0 mt-0.5 text-error">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Error
        </p>
<div class="mt-1">
            Connection failed. Please try again.
        </div>
</div>
</div>

<x-alert color="error" title="Error" dismissible>Connection failed. Please try again.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-100 text-base-content tune-border border-base-content/10 border-l-4 border-l-error" role="alert" x-data="{ show: true }" x-show="show" x-transition="">
<div class="shrink-0 mt-0.5 text-error">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Error
        </p>
<div class="mt-1">
            Connection failed. Please try again.
        </div>
</div><button type="button" class="shrink-0 opacity-60 hover:opacity-100 transition-opacity cursor-pointer" @click="show = false" aria-label="Close"><svg class="w-[1em] h-[1em]" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="m18 6l-12 12M6 6l12 12"></path></svg></button>
</div>

<x-alert color="info" appearance="soft" title="Info alert">Soft appearance keeps body text at base-content.</x-alert>
<x-alert color="success" appearance="soft" title="Success alert">Success notification with soft appearance.</x-alert>
<x-alert color="warning" appearance="soft" title="Warning alert">Warning notification with soft appearance.</x-alert>
<x-alert color="error" appearance="soft" title="Error alert">Error notification with soft appearance.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-info/15 tune-border border-info/40" role="alert">
<div class="shrink-0 mt-0.5 text-info">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-base-content">
            Info alert
        </p>
<div class="mt-1 text-base-content opacity-80">
            Soft appearance keeps body text at base-content.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-success/15 tune-border border-success/40" role="alert">
<div class="shrink-0 mt-0.5 text-success">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-base-content">
            Success alert
        </p>
<div class="mt-1 text-base-content opacity-80">
            Success notification with soft appearance.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-warning/15 tune-border border-warning/40" role="alert">
<div class="shrink-0 mt-0.5 text-warning">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<path stroke="currentColor" stroke-width="1.5" d="M5.312 10.762C8.23 5.587 9.689 3 12 3s3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022z"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 8v5"></path>
<circle cx="12" cy="16" r="1" fill="currentColor"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-base-content">
            Warning alert
        </p>
<div class="mt-1 text-base-content opacity-80">
            Warning notification with soft appearance.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-error/15 tune-border border-error/40" role="alert">
<div class="shrink-0 mt-0.5 text-error">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-base-content">
            Error alert
        </p>
<div class="mt-1 text-base-content opacity-80">
            Error notification with soft appearance.
        </div>
</div>
</div>

<x-alert color="info" appearance="vivid" title="Info alert">Vivid uses a saturated color-mix background.</x-alert>
<x-alert color="success" appearance="vivid" title="Success alert">Success notification, vivid appearance.</x-alert>
<x-alert color="warning" appearance="vivid" title="Warning alert">Warning notification, vivid appearance.</x-alert>
<x-alert color="error" appearance="vivid" title="Error alert">Error notification, vivid appearance.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-info/15 tune-border border-info/40" role="alert">
<div class="shrink-0 mt-0.5 text-info">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-[color-mix(in_oklch,var(--color-info),var(--color-base-content)_20%)]">
            Info alert
        </p>
<div class="mt-1 text-[color-mix(in_oklch,var(--color-info),var(--color-base-content)_20%)] opacity-80">
            Vivid uses a saturated color-mix background.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-success/15 tune-border border-success/40" role="alert">
<div class="shrink-0 mt-0.5 text-success">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-[color-mix(in_oklch,var(--color-success),var(--color-base-content)_20%)]">
            Success alert
        </p>
<div class="mt-1 text-[color-mix(in_oklch,var(--color-success),var(--color-base-content)_20%)] opacity-80">
            Success notification, vivid appearance.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-warning/15 tune-border border-warning/40" role="alert">
<div class="shrink-0 mt-0.5 text-warning">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<path stroke="currentColor" stroke-width="1.5" d="M5.312 10.762C8.23 5.587 9.689 3 12 3s3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022z"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 8v5"></path>
<circle cx="12" cy="16" r="1" fill="currentColor"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-[color-mix(in_oklch,var(--color-warning),var(--color-base-content)_20%)]">
            Warning alert
        </p>
<div class="mt-1 text-[color-mix(in_oklch,var(--color-warning),var(--color-base-content)_20%)] opacity-80">
            Warning notification, vivid appearance.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-error/15 tune-border border-error/40" role="alert">
<div class="shrink-0 mt-0.5 text-error">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-[color-mix(in_oklch,var(--color-error),var(--color-base-content)_20%)]">
            Error alert
        </p>
<div class="mt-1 text-[color-mix(in_oklch,var(--color-error),var(--color-base-content)_20%)] opacity-80">
            Error notification, vivid appearance.
        </div>
</div>
</div>

<x-alert color="info" appearance="solid" title="Info alert">Solid fills with the semantic color.</x-alert>
<x-alert color="success" appearance="solid" title="Success alert">Success notification, solid appearance.</x-alert>
<x-alert color="warning" appearance="solid" title="Warning alert">Warning notification, solid appearance.</x-alert>
<x-alert color="error" appearance="solid" title="Error alert">Error notification, solid appearance.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-info text-info-content tune-border border-info" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Info alert
        </p>
<div class="mt-1">
            Solid fills with the semantic color.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-success text-success-content tune-border border-success" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Success alert
        </p>
<div class="mt-1">
            Success notification, solid appearance.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-warning text-warning-content tune-border border-warning" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<path stroke="currentColor" stroke-width="1.5" d="M5.312 10.762C8.23 5.587 9.689 3 12 3s3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022z"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 8v5"></path>
<circle cx="12" cy="16" r="1" fill="currentColor"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Warning alert
        </p>
<div class="mt-1">
            Warning notification, solid appearance.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-error text-error-content tune-border border-error" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Error alert
        </p>
<div class="mt-1">
            Error notification, solid appearance.
        </div>
</div>
</div>

<x-alert color="info" appearance="outline" title="Info alert">Outline draws the border only.</x-alert>
<x-alert color="success" appearance="outline" title="Success alert">Success notification, outline appearance.</x-alert>
<x-alert color="warning" appearance="outline" title="Warning alert">Warning notification, outline appearance.</x-alert>
<x-alert color="error" appearance="outline" title="Error alert">Error notification, outline appearance.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-transparent text-info tune-border border-info" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Info alert
        </p>
<div class="mt-1">
            Outline draws the border only.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-transparent text-success tune-border border-success" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Success alert
        </p>
<div class="mt-1">
            Success notification, outline appearance.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-transparent text-warning tune-border border-warning" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<path stroke="currentColor" stroke-width="1.5" d="M5.312 10.762C8.23 5.587 9.689 3 12 3s3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022z"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 8v5"></path>
<circle cx="12" cy="16" r="1" fill="currentColor"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Warning alert
        </p>
<div class="mt-1">
            Warning notification, outline appearance.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-transparent text-error tune-border border-error" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Error alert
        </p>
<div class="mt-1">
            Error notification, outline appearance.
        </div>
</div>
</div>

<x-alert color="info" appearance="base-100" title="base-100">Surface-tinted alert on the page canvas.</x-alert>
<x-alert color="info" appearance="base-200" title="base-200">Blends into a base-200 panel.</x-alert>
<x-alert color="info" appearance="base-300" title="base-300">Blends into a base-300 panel.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-100 tune-border border-base-content/10" role="alert">
<div class="shrink-0 mt-0.5 text-info">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-base-content">
            base-100
        </p>
<div class="mt-1 text-base-content opacity-80">
            Surface-tinted alert on the page canvas.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-200 tune-border border-base-content/10" role="alert">
<div class="shrink-0 mt-0.5 text-info">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-base-content">
            base-200
        </p>
<div class="mt-1 text-base-content opacity-80">
            Blends into a base-200 panel.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-300 tune-border border-base-content/10" role="alert">
<div class="shrink-0 mt-0.5 text-info">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold text-base-content">
            base-300
        </p>
<div class="mt-1 text-base-content opacity-80">
            Blends into a base-300 panel.
        </div>
</div>
</div>

<x-alert color="info" appearance="bordered-top" title="Bordered-top Info">Top accent bar.</x-alert>
<x-alert color="success" appearance="bordered-top" title="Bordered-top Success">Preline-style top accent.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-100 text-base-content tune-border border-base-content/10 border-t-4 border-t-info" role="alert">
<div class="shrink-0 mt-0.5 text-info">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Bordered-top Info
        </p>
<div class="mt-1">
            Top accent bar.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-base-100 text-base-content tune-border border-base-content/10 border-t-4 border-t-success" role="alert">
<div class="shrink-0 mt-0.5 text-success">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"></path>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Bordered-top Success
        </p>
<div class="mt-1">
            Preline-style top accent.
        </div>
</div>
</div>

<x-alert color="info" appearance="ghost" title="Ghost Info">No background or border, text-only minimal display.</x-alert>
<x-alert color="primary" appearance="link" title="Link Primary">Underlined link-style alert.</x-alert>

<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-transparent text-info tune-border border-transparent" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Ghost Info
        </p>
<div class="mt-1">
            No background or border, text-only minimal display.
        </div>
</div>
</div>
<div class="flex gap-xs rounded-[var(--radius-box)] min-h-[var(--h-field-md)] px-[var(--px-field-md)] py-[var(--px-field-md)] text-[length:var(--text-field-md)] bg-transparent text-primary underline underline-offset-2 tune-border border-transparent" role="alert">
<div class="shrink-0 mt-0.5">
<svg class="w-[1.25em] h-[1.25em]" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg>
</div>
<div class="flex-1">
<p class="font-semibold">
            Link Primary
        </p>
<div class="mt-1">
            Underlined link-style alert.
        </div>
</div>
</div>