Alert

A message announced when an action needs attention.

Source

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import AlertExample from './AlertExample.svelte';
</script>

<AlertExample />

<script lang="ts">
  import { Alert, Button } from 'portal-bits';
  let message = $state('');
</script>

<div class="field">
  <Button onclick={() => (message = message ? '' : 'Enter a display name before saving.')}>
    {message ? 'Clear alert' : 'Show alert'}
  </Button>
  {#if message}<Alert {message} />{/if}
</div>

<style>
  .field {
    max-width: 340px;
  }
</style>

API reference

These tables list the props and snippets that Alert declares. Attributes passed through to an element or primitive are listed under Forwarded attributes, not here.

Props

Name	Type	Default	Required	Binding	Description
`message`	`string`	None	No	One-way	The text. Supply it or `children`, not both.
`class`	`string`	`""`	No	One-way	Extra classes, added after the component classes.

Snippets

Name	Type	Default	Required	Binding	Description
`children`	`Snippet`	None	No	One-way	Short inline content. Supply it or `message`, not both.

Forwarded attributes

Native paragraph attributes except `children` and `role`: `id`, `aria-*`, `data-*`, and handlers. They land on the `p` element.

No data attributes are documented as stable.

Limits

The type requires exactly one of `message` or `children`.
`role` is fixed at `alert`. Mount the component when an action fails, and remove it when cleared.
No dismiss button, icon, or heading. Alert is an adaptation.

Related