Alert

The surface stays neutral in every variant; only the icon and its color change. Alert.Root has role="alert", so screen readers announce it when it appears.

Scheduled maintenance

Deploys are paused on Saturday from 02:00 to 04:00 UTC.

<script lang="ts">
    import * as Alert from '@sivir-ui/svelte/components/alert';
</script>

<div class="w-full max-w-md">
    <Alert.Root>
        <Alert.Title>Scheduled maintenance</Alert.Title>
        <Alert.Description>
            Deploys are paused on Saturday from 02:00 to 04:00 UTC.
        </Alert.Description>
    </Alert.Root>
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add alert

Usage

variant defaults to info. Alert.Root draws the icon; you supply the title and description.

import * as Alert from '@sivir-ui/svelte/components/alert';

<Alert.Root variant="warning">
  <Alert.Title>Card expires soon</Alert.Title>
  <Alert.Description>Update your payment method before May 1.</Alert.Description>
</Alert.Root>

Anatomy

Alert.Root - Provides the alert container.

Alert.Title - Renders the alert heading.

Alert.Description - Renders the alert details.