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. Alerts are announced by assistive technology as status messages.

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.

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>

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.

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>

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.

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.