Notification Area

A fixed area for displaying non-intrusive notifications and alerts.

Props

Prop	Type	Default	Description
`items`	`Notification[]`	`[]`	A bindable array of notification items.
`position`	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`	The corner of the screen where notifications appear.
`variant`	`string`	`''`	Custom variant class for theming.

A fixed area for displaying non-intrusive notifications and alerts.

Click buttons to spawn notifications in the area.

<script>

  import { NotificationArea } from 'fluid-ui-svelte/components';

  import { Button } from 'fluid-ui-svelte/base';

  let notifications = $state([]);

  function add() {

    notifications = [...notifications, {

      id: Date.now(),

      message: 'New Notification!',

      type: 'success',

      duration: 3000

}];

</script>

<Button onclick={async () => add()}>Notify</Button>

<NotificationArea bind:items={notifications} position="top-right" />