Display

Alert

Inline status messages for success, warning, error and info states, with an optional title and close action.

<script>
  import { Alert } from "@codeatlasdev/ui";
</script>

<Alert severity="success" title="Saved">Your changes were saved.</Alert>

The parent owns visibility: render the alert conditionally and hide it from onclose. The root has role="alert" with aria-live="polite", so assistive technology announces it.

#105

Severities

All four semantic variants.

Your changes have been saved successfully.

Your trial expires in 3 days. Upgrade to keep access.

Failed to connect. Check your network and try again.

A new version of CodeAtlas UI is available.

Reference #105 · Pick in the gallery

Code

<script lang="ts">
  import { Alert } from '@codeatlasdev/ui';
</script>

<div class="col">
  <Alert severity="success">Your changes have been saved successfully.</Alert>
  <Alert severity="warning">Your trial expires in 3 days. Upgrade to keep access.</Alert>
  <Alert severity="error">Failed to connect. Check your network and try again.</Alert>
  <Alert severity="info">A new version of CodeAtlas UI is available.</Alert>
</div>

<style>
  .col { display: flex; flex-direction: column; gap: var(--ca-space-3); width: 100%; max-width: 560px; }
</style>

#106

With title

An optional title adds a bold heading above the message.

Changes saved

All your edits have been persisted to the database.

Authentication failed

The provided credentials are incorrect. Try again or reset your password.

Reference #106 · Pick in the gallery

Code

<script lang="ts">
  import { Alert } from '@codeatlasdev/ui';
</script>

<div class="col">
  <Alert severity="success" title="Changes saved">
    All your edits have been persisted to the database.
  </Alert>
  <Alert severity="error" title="Authentication failed">
    The provided credentials are incorrect. Try again or reset your password.
  </Alert>
</div>

<style>
  .col { display: flex; flex-direction: column; gap: var(--ca-space-3); width: 100%; max-width: 560px; }
</style>

#104

Closable

Shows a dismiss button. The parent hides the alert in `onclose`.

Heads up

This feature is in beta. Some behavior may change.

Storage is 85% full. Consider cleaning up old files.

Reference #104 · Pick in the gallery

Code

<script lang="ts">
  import { Alert } from '@codeatlasdev/ui';

  let closedInfo = $state(false);
  let closedWarn = $state(false);
</script>

<div class="col">
  {#if !closedInfo}
    <Alert severity="info" title="Heads up" closable onclose={() => (closedInfo = true)}>
      This feature is in beta. Some behavior may change.
    </Alert>
  {:else}
    <p class="dismissed">Info alert dismissed.</p>
  {/if}
  {#if !closedWarn}
    <Alert severity="warning" closable onclose={() => (closedWarn = true)}>
      Storage is 85% full. Consider cleaning up old files.
    </Alert>
  {:else}
    <p class="dismissed">Warning alert dismissed.</p>
  {/if}
</div>

<style>
  .col { display: flex; flex-direction: column; gap: var(--ca-space-3); width: 100%; max-width: 560px; }
  .dismissed { margin: 0; font-size: var(--ca-font-size-caption); color: var(--ca-text-hint); font-style: italic; }
</style>

Props

Prop	Type	Default	Description
`severity`	`'success' \| 'warning' \| 'error' \| 'info'`	–	Semantic color and icon. Required.
`title`	`string`	`undefined`	Bold heading above the message.
`closable`	`boolean`	`false`	Shows a dismiss button.
`onclose`	`() => void`	`undefined`	Called when the close button is clicked.
`class`	`string`	`''`	Extra class names on the root element.
`children`	`Snippet`	`undefined`	Alert body content.