Alert

Alerts display important messages to users about actions, errors, or system status.

Import​

<script>
  import { Alert, AlertTitle, AlertDescription } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>This is a default alert message.</AlertDescription>
</Alert>

Props​

Prop	Type	Default	Description
variant	'default' | 'destructive' | 'error' | 'success' | 'warning' | 'info'	'default'	Alert style variant
class	string	-	Additional CSS classes

Variants​

Default​

Neutral information message:

<Alert variant="default">
  <AlertTitle>Note</AlertTitle>
  <AlertDescription>This is a neutral informational message.</AlertDescription>
</Alert>

Success​

Positive feedback for completed actions:

<Alert variant="success">
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

Warning​

Caution about potential issues:

<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Your session will expire in 5 minutes.</AlertDescription>
</Alert>

Error / Destructive​

Error messages and critical alerts:

<Alert variant="error">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>There was a problem processing your request.</AlertDescription>
</Alert>

Info​

Helpful information or tips:

<Alert variant="info">
  <AlertTitle>Did you know?</AlertTitle>
  <AlertDescription>You can use keyboard shortcuts for faster navigation.</AlertDescription>
</Alert>

With Icons​

Add icons for visual reinforcement:

<Alert variant="success">
  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
  </svg>
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Your profile has been updated.</AlertDescription>
</Alert>

Icons are automatically positioned to the left with proper spacing.

Sub-Components​

AlertTitle​

Bold heading for the alert message. Optional but recommended for context.

AlertDescription​

Main content of the alert. Can contain multiple paragraphs or other elements.

Accessibility​

The Alert component includes:

• role="alert" for screen reader announcement
• aria-live attribute for dynamic updates:
  • assertive for errors, destructive, and warnings
  • polite for success, info, and default
• Proper color contrast for all variants
• Works with screen readers out of the box

Examples​

Form Validation Error​

{#if formErrors.length > 0}
  <Alert variant="error">
    <AlertTitle>Please fix the following errors:</AlertTitle>
    <AlertDescription>
      <ul class="list-disc pl-4 mt-2">
        {#each formErrors as error}
          <li>{error}</li>
        {/each}
      </ul>
    </AlertDescription>
  </Alert>
{/if}

Dismissible Alert​

<script>
  let showAlert = $state(true);
</script>

{#if showAlert}
  <Alert variant="info" class="relative">
    <AlertTitle>New Feature</AlertTitle>
    <AlertDescription>Check out our new dashboard!</AlertDescription>
    <button
      class="absolute top-4 right-4 text-muted-foreground hover:text-foreground"
      onclick={() => (showAlert = false)}
      aria-label="Dismiss"
    >
      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M6 18L18 6M6 6l12 12"
        />
      </svg>
    </button>
  </Alert>
{/if}

System Status​

<Alert variant="warning">
  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
    />
  </svg>
  <AlertTitle>Maintenance Scheduled</AlertTitle>
  <AlertDescription>
    The system will be unavailable on Sunday from 2:00 AM to 4:00 AM EST.
  </AlertDescription>
</Alert>

Success with Action​

<Alert variant="success">
  <AlertTitle>Order Confirmed</AlertTitle>
  <AlertDescription>
    <p>Your order #12345 has been placed successfully.</p>
    <a href="/orders/12345" class="underline font-medium mt-2 inline-block"> View order details </a>
  </AlertDescription>
</Alert>

Compact Alert (Title Only)​

<Alert variant="info">
  <AlertDescription>Pro tip: Press Ctrl+K to open the command palette.</AlertDescription>
</Alert>

Related Components​

• Toast - For brief, dismissible notifications
• Badge - For inline status indicators
• Card - For content containers