Alert

<script lang="ts">
  import { Alert } from 'sv5ui';
</script>

<Alert
  title="Heads up!"
  description="You can add components to your app using the CLI."
/>

<Alert variant="solid" title="Solid" description="This is a solid alert." />
<Alert variant="outline" title="Outline" description="This is an outline alert." />
<Alert variant="soft" title="Soft" description="This is a soft alert." />
<Alert variant="subtle" title="Subtle" description="This is a subtle alert." />

<Alert color="success" title="Success" description="Your changes have been saved." icon="lucide:check-circle" />
<Alert color="warning" title="Warning" description="Your session is about to expire." icon="lucide:alert-triangle" />
<Alert color="error" title="Error" description="Something went wrong. Please try again." icon="lucide:x-circle" />
<Alert color="info" title="Info" description="A new version is available." icon="lucide:info" />

<Alert
  title="Update available"
  description="A new software update is available for download."
  icon="lucide:download"
  color="info"
/>

<Alert
  title="Confirm action"
  description="Are you sure you want to proceed with this action?"
  icon="lucide:alert-triangle"
  color="warning"
  :actions={[
    { label: 'Cancel', variant: 'outline', color: 'surface', size: 'xs' },
    { label: 'Confirm', variant: 'solid', color: 'warning', size: 'xs' }
  ]}
/>

<script lang="ts">
  import { Alert, Button } from 'sv5ui';

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

{#if alertOpen}
  <Alert
    title="Dismissible alert"
    description="Click the close button to dismiss this alert."
    close
    onClose={() => (alertOpen = false)}
  />
{/if}

{#if !alertOpen}
  <Button
    label="Show alert"
    size="sm"
    variant="outline"
    onclick={() => (alertOpen = true)}
  />
{/if}

<Alert
  orientation="vertical"
  title="Vertical layout"
  description="This alert uses a vertical orientation for a stacked layout."
  icon="lucide:layout"
  color="tertiary"
  :actions={[
    { label: 'Learn more', variant: 'outline', color: 'tertiary', size: 'xs' }
  ]}
/>