Alert

A component to display important messages and notifications to users

Variants

Default Alert

This is a default alert message.

Information

This is an informational message to keep you updated.

Success

Your changes have been saved successfully.

Warning

Please review your settings before proceeding.

Error

Something went wrong. Please try again.

Code Svelte

1
2<script lang="ts">
3	import { Alert } from "@kareyes/aether";
4
5</script>
6
7<div class="space-y-4">
8    <Alert variant="default" title="Default Alert" description="This is a default alert message." />
9    <Alert variant="info" title="Information" description="This is an informational message to keep you updated." />
10    <Alert variant="success" title="Success" description="Your changes have been saved successfully." />
11    <Alert variant="warning" title="Warning" description="Please review your settings before proceeding." />
12    <Alert variant="error" title="Error" description="Something went wrong. Please try again." />
13    
14</div>
15

With and Without Icons

With Icon

This alert displays the default variant icon.

Without Icon

This alert hides the icon for a cleaner look.

Code Svelte

1
2<script lang="ts">
3    import { Alert } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7    <Alert 
8        variant="info" 
9        title="With Icon" 
10        description="This alert displays the default variant icon." 
11        showIcon={true}
12    />
13    <Alert 
14        variant="success" 
15        title="Without Icon" 
16        description="This alert hides the icon for a cleaner look." 
17        showIcon={false}
18    />
19</div>

Dismissible Alerts

Click the X button to dismiss these alerts.

Dismissible Info

You can dismiss this alert.

Dismissible Warning

Click the X to close this warning.

Code Svelte

1
2<script lang="ts">
3    import { Alert } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7    <Alert 
8        variant="info" 
9        title="Dismissible Info" 
10        description="You can dismiss this alert." 
11        dismissible={true}
12    />
13    <Alert 
14        variant="warning" 
15        title="Dismissible Warning" 
16        description="Click the X to close this warning." 
17        dismissible={true}
18    />
19</div>

With Action Buttons

Pending Changes

You have unsaved changes in your document.

Connection Lost

We couldn't connect to the server.

Update Available

A new version of the application is ready to install.

Code Svelte

1
2<script lang="ts">
3    import { Alert, Button } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7    <Alert variant="warning" title="Pending Changes" description="You have unsaved changes in your document.">
8        {#snippet actions()}
9            <Button variant="outline" size="sm">Discard</Button>
10            <Button size="sm" color="warning" variant="flat">Save Changes</Button>
11        {/snippet}
12    </Alert>
13
14    <Alert variant="error" title="Connection Lost" description="We couldn't connect to the server.">
15        {#snippet actions()}
16            <Button variant="outline" size="sm">Cancel</Button>
17            <Button size="sm" color="danger" variant="flat">Retry</Button>
18        {/snippet}
19    </Alert>
20
21    <Alert variant="success" title="Update Available" description="A new version of the application is ready to install.">
22        {#snippet actions()}
23            <Button variant="outline" size="sm">Later</Button>
24            <Button size="sm" color="success" variant="flat">Install Now</Button>
25        {/snippet}
26    </Alert>
27</div>

Custom Content

Scheduled Maintenance

The system will undergo scheduled maintenance on Sunday at 2:00 AM UTC.

Verification Complete

Your account has been verified successfully.

Code Svelte

1
2<script lang="ts">
3   	import { AlertPrimitives } from "@kareyes/aether";
4   
5</script>
6
7<div class="space-y-4">
8    <AlertPrimitives.Root variant="info">
9        {#snippet icon()}
10            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
11                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
12            </svg>
13        {/snippet}
14        <AlertPrimitives.Title>Scheduled Maintenance</AlertPrimitives.Title>
15        <AlertPrimitives.Description>
16            The system will undergo scheduled maintenance on Sunday at 2:00 AM UTC.
17        </AlertPrimitives.Description>
18    </AlertPrimitives.Root>
19
20    <AlertPrimitives.Root variant="success">
21        {#snippet icon()}
22            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
23                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
24            </svg>
25        {/snippet}
26        <AlertPrimitives.Title>Verification Complete</AlertPrimitives.Title>
27        <AlertPrimitives.Description>
28            Your account has been verified successfully.
29        </AlertPrimitives.Description>
30    </AlertPrimitives.Root>
31</div>

Complex Examples

Storage Almost Full

You're using 95% of your storage quota. Upgrade your plan or delete files to continue.

Payment Failed

Your payment could not be processed. Please check the following:

Card details are correct
Sufficient funds are available
Card is not expired

Code Svelte

1
2<script lang="ts">
3    import { AlertPrimitives, Button } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7    <AlertPrimitives.Root variant="warning" dismissible={true}>
8        {#snippet icon()}
9            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
10                <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" />
11            </svg>
12        {/snippet}
13        <AlertPrimitives.Title>Storage Almost Full</AlertPrimitives.Title>
14        <AlertPrimitives.Description>
15            You're using 95% of your storage quota. Upgrade your plan or delete files to continue.
16        </AlertPrimitives.Description>
17        {#snippet actions()}
18            <Button variant="outline" size="sm">Manage Files</Button>
19            <Button size="sm">Upgrade Plan</Button>
20        {/snippet}
21    </AlertPrimitives.Root>
22
23    <AlertPrimitives.Root variant="error">
24        {#snippet icon()}
25            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
26                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
27            </svg>
28        {/snippet}
29        <AlertPrimitives.Title>Payment Failed</AlertPrimitives.Title>
30        <AlertPrimitives.Description>
31            <p>Your payment could not be processed. Please check the following:</p>
32            <ul class="list-disc list-inside mt-2 space-y-1">
33                <li>Card details are correct</li>
34                <li>Sufficient funds are available</li>
35                <li>Card is not expired</li>
36            </ul>
37        </AlertPrimitives.Description>
38        {#snippet actions()}
39            <Button variant="outline" size="sm">Contact Support</Button>
40            <Button size="sm">Try Again</Button>
41        {/snippet}
42    </AlertPrimitives.Root>
43</div>

Compact Layout

Alerts with just titles or descriptions.

Quick update available

File uploaded successfully

Low disk space

Code Svelte

1
2<script lang="ts">
3    import { Alert } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7    <Alert variant="info" title="Quick update available" />
8    <Alert variant="success" description="File uploaded successfully" />
9    <Alert variant="warning" title="Low disk space" />
10</div>

Real-World Examples

Cookie Notice

Stay Updated

Subscribe to our newsletter for the latest updates.

Security Alert

Unusual login activity detected from a new location.

Code Svelte

1
2<script lang="ts">
3    import { Alert, Button } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7<!-- Cookie Notice -->
8<Alert variant="default" title="Cookie Notice" dismissible={true}>
9    {#snippet actions()}
10        <Button variant="outline" size="sm">Decline</Button>
11        <Button size="sm">Accept</Button>
12    {/snippet}
13</Alert>
14
15<!-- Newsletter Signup -->
16<Alert variant="info" title="Stay Updated" description="Subscribe to our newsletter for the latest updates.">
17    {#snippet actions()}
18        <Button size="sm">Subscribe</Button>
19    {/snippet}
20</Alert>
21
22<!-- Security Alert -->
23<Alert variant="error" title="Security Alert" description="Unusual login activity detected from a new location." dismissible={false}>
24    {#snippet actions()}
25        <Button variant="outline" size="sm">It Was Me</Button>
26        <Button size="sm">Secure Account</Button>
27    {/snippet}
28</Alert>
29</div>

Basic Usage

<script lang="ts">
  import { Alert } from "@kareyes/aether";
</script>

<Alert
  variant="info"
  title="Information"
  description="This is an informational message."
/>

With Primitives Import

<script lang="ts">
  import { AlertPrimitives } from "@kareyes/aether";
</script>

<AlertPrimitives.Root variant="success">
  <AlertPrimitives.Title>Success!</AlertPrimitives.Title>
  <AlertPrimitives.Description>
    Your changes have been saved.
  </AlertPrimitives.Description>
</AlertPrimitives.Root>

Components

Component	Description
`Alert`	Simple wrapper component with convenient props
`Root`	Root container with variant styling
`Title`	Alert title element
`Description`	Alert description element

Props Reference

Alert (Wrapper Component)

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "info" \| "success" \| "warning" \| "error"`	`"default"`	Visual style variant
`title`	`string`	`undefined`	Alert title text
`description`	`string`	`undefined`	Alert description text
`icon`	`Snippet`	`undefined`	Custom icon snippet (overrides default)
`showIcon`	`boolean`	`true`	Whether to show the icon
`dismissible`	`boolean`	`false`	Whether alert can be dismissed
`onDismiss`	`() => void`	`undefined`	Callback when alert is dismissed
`actions`	`Snippet`	`undefined`	Action buttons snippet
`children`	`Snippet`	`undefined`	Custom content
`class`	`string`	-	Additional CSS classes

Root (Primitive)

Prop	Type	Default	Description
`variant`	`AlertVariant`	`"default"`	Visual style variant
`icon`	`Snippet`	`undefined`	Icon snippet
`dismissible`	`boolean`	`false`	Whether alert can be dismissed
`onDismiss`	`() => void`	`undefined`	Dismiss callback
`actions`	`Snippet`	`undefined`	Actions snippet
`class`	`string`	-	Additional CSS classes

Title

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes

Description

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes

Variants

Default

Neutral gray styling for general information:

<Alert variant="default" title="Default Alert" description="General information message." />

Destructive

Red styling for destructive or critical actions:

<Alert variant="destructive" title="Destructive Action" description="This action is permanent." />

Info

Blue styling for informational messages:

<Alert variant="info" title="Information" description="Here's some helpful information." />

Success

Green styling for success messages:

<Alert variant="success" title="Success!" description="Operation completed successfully." />

Warning

Yellow/orange styling for warnings:

<Alert variant="warning" title="Warning" description="Please review before proceeding." />

Error

Red styling for error messages:

<Alert variant="error" title="Error" description="An error occurred during processing." />

Icon System

Default Icons

Each variant has an automatic icon:

Variant	Icon
`default`	CircleAlert
`destructive`	CircleX
`info`	Info
`success`	CircleCheck
`warning`	TriangleAlert
`error`	CircleX

Custom Icon

<script lang="ts">
  import { Alert } from "@kareyes/aether";
  import MyCustomIcon from "@lucide/svelte/icons/star";
</script>

<Alert variant="info" title="Custom Icon">
  {#snippet icon()}
    <MyCustomIcon class="size-5" />
  {/snippet}
</Alert>

Hide Icon

<Alert variant="warning" title="No Icon" showIcon={false} />

Examples

With Actions

<script lang="ts">
  import { Alert, Button } from "@kareyes/aether";
</script>

<Alert
  variant="warning"
  title="Warning"
  description="This action cannot be undone."
>
  {#snippet actions()}
    <Button variant="outline" size="sm">Cancel</Button>
    <Button variant="destructive" size="sm">Confirm</Button>
  {/snippet}
</Alert>

Dismissible Alert

<script lang="ts">
  import { Alert } from "@kareyes/aether";

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

{#if showAlert}
  <Alert
    variant="success"
    title="Success!"
    description="Your changes have been saved."
    dismissible={true}
    onDismiss={() => showAlert = false}
  />
{/if}

Form Validation Error

<Alert
  variant="error"
  title="Validation Failed"
  description="Please correct the following errors:"
>
  <ul class="mt-2 list-disc list-inside text-sm">
    <li>Email is required</li>
    <li>Password must be at least 8 characters</li>
  </ul>
</Alert>

Using Primitives

For complete control, use the primitive components:

<script lang="ts">
  import { AlertPrimitives } from "@kareyes/aether";
  import CheckIcon from "@lucide/svelte/icons/check";
</script>

<AlertPrimitives.Root variant="success" dismissible={true} onDismiss={handleDismiss}>
  {#snippet icon()}
    <div class="flex-none w-9 h-9 rounded-full grid place-items-center bg-green-50 dark:bg-green-500/20">
      <CheckIcon class="size-4 text-green-600 dark:text-green-400" />
    </div>
  {/snippet}

  <AlertPrimitives.Title>Payment Successful</AlertPrimitives.Title>
  <AlertPrimitives.Description>
    Your payment of $99.00 has been processed successfully.
  </AlertPrimitives.Description>

  {#snippet actions()}
    <button class="text-sm font-medium underline">View Receipt</button>
  {/snippet}
</AlertPrimitives.Root>

Success with Action

<script lang="ts">
  import { Alert } from "@kareyes/aether";
</script>

<Alert
  variant="success"
  title="Profile Updated"
  description="Your profile changes have been saved successfully."
>
  {#snippet actions()}
    <a href="/profile" class="text-sm font-medium text-green-600 dark:text-green-400 hover:underline">
      View Profile
    </a>
  {/snippet}
</Alert>

Confirmation Alert

<script lang="ts">
  import { Alert, Button } from "@kareyes/aether";

  function handleDelete() {
    // Handle delete
  }

  function handleCancel() {
    // Handle cancel
  }
</script>

<Alert
  variant="warning"
  title="Confirm Deletion"
  description="Are you sure you want to delete this item? This action cannot be undone."
>
  {#snippet actions()}
    <div class="flex gap-2 mt-3">
      <Button variant="destructive" onclick={handleDelete}>Delete</Button>
      <Button variant="outline" onclick={handleCancel}>Cancel</Button>
    </div>
  {/snippet}
</Alert>

Accessibility

The Alert component follows accessibility best practices:

ARIA Attributes

Proper semantic HTML structure
role="alert" for screen readers
Dismissible alerts include aria-label

Keyboard Navigation

Key	Action
`Enter` / `Space`	Activate dismiss button
`Tab`	Move focus to interactive elements

Best Practices

Use appropriate variants: Match the variant to the message severity
Provide clear actions: Make it easy for users to respond to alerts
Test with screen readers: Ensure announcements are clear and helpful
Don't overuse: Too many alerts can desensitize users