<!--
Source: https://www.theui.dev/docs/notification
Part of the theui-svelte documentation. Index: https://www.theui.dev/llms.txt
-->

# Notification

A lightweight way to display temporary messages without interrupting the user experience. It appears briefly, disappears automatically, and is fully customizable.

## About

This component is ideal for showing temporary messages such as success alerts, error messages, or status updates. It supports customization options, including different colors, positions, icons, and auto-dismiss settings. Whether you need to notify users about form submissions, system errors, or background processes, the Notification (Toast) component offers a flexible and efficient solution.

## Example

To use the `Notification` component, you need to add it once in your application. The recommended place is `+layout.svelte` to ensure it is available throughout your app, but you can place it anywhere suitable.

```html

<script>
  import { Notification } from "theui-svelte";
</script>

<!-- Add Notification component once, ideally in +layout.svelte -->
<Notification />
```

Once added, you can trigger notifications anywhere in your app using the `notify` function.

```html
<script>
  import { notify } from "theui-svelte";
</script>

<!-- Trigger the notifications -->
<Button
  onclick={
    () => notify("Hello world!")
  }
>Notify</Button>
```

This will display a simple notification with the message **"Hello world!"**.

## Notification Position

By default the notification will appears at the top-end corner of the display. But you can change it using the `position` prop in the `Notification` component. The available value of the position prop are `"top-end"`, `"top-center"`, `"top-start"`, `"bottom-end"`, `"bottom-center"`, and `"bottom-start"`. Default value is `"top-end"`.

```html
<Notification position="bottom-end" />
```

## Notification Animation

By default, notifications slide in when they appear and fade out when they are removed. Use the `animationSpeed` prop on the `Notification` component to control this. Unlike other components, it is a boolean: `true` (default) enables the animation, and `false` turns it off.

```html
<Notification animationSpeed={false} />
```

## Notification Type

The `notify` function accept some parameters along with the message. You have to pass the message as the first parameter. The second parameter defines the type of the notification. Basically it changes the color based on the type. The available types are `"error"`, `"info"`, `"success"`, and `"warning"`. The default value is `"error"`.

```js
notify("Hello world!", "success") // You can replace "success" with any message type!
```

## Notification Theme

You can control the background color of the notifications with the `theme` prop. It supports three options: `'default'`, `'soft'`, and `'gradient'`. The `'default'` theme follows the standard notification styling, the `'soft'` theme provides a softer color palette for a more subtle look, and the `'gradient'` theme uses a two color gradient.

### Soft Theme

The `'soft'` theme uses a tinted background instead of a solid one.

```js
notify( "Hello world!", "success", {theme: "soft"} )
```

### Gradient Theme

The `'gradient'` theme fills the background with a two color gradient.

```js
notify( "Hello world!", "success", {theme: "gradient"} )
```

## Notification Variant

The `'variant'` property allows you to change the visual style of the notification while keeping it minimal. There are four available variants: `'card'`, `'borderTop'`, `'borderBottom'`, and `'borderStart'`.

The default variant, `'card'`, follows a standard notification style without extra elements. The other three variants, `'borderTop'`, `'borderBottom'` and `'borderStart'`, add a thin line to that side of the notification. It is a small change, but it tells one notification from another at a glance.

For example, using `borderTop` will place a small line at the top of the notification, while `borderBottom` and `borderStart` will do the same for the bottom and start (left in LTR layouts, right in RTL layouts).

```js
notify("Hello world!", "success", {theme: "soft", variant: "borderTop"})
```

## Notification Duration

The `removeAfter` property controls how long a notification remains visible before closing automatically. It accepts an integer value in milliseconds, or `false`.

- The **default duration is 4000ms** (4 seconds), meaning notifications disappear after this time.

- Setting it to **false** keeps the notification open indefinitely until manually closed.

```js
notify("Hello world!", "error", {removeAfter: 3000})
```

## Remove On Click

By default, notifications close when clicked. You can change this behavior using the `removeOnClick` property in the options object. When set to `true` (default), clicking the notification will dismiss it. If set to `false`, the notification will remain visible even when clicked.

```js
notify("Hello world!", "error", {removeOnClick: false})
```

## notify() Function

The `notify` function displays notifications with customizable options. It accepts three parameters:

- **msg** (type string) - The message displayed in the notification. HTML in the message is sanitized before rendering.

- **type** (type [NOTIFICATION_TYPE](https://www.theui.dev/docs/types#notification-types)) - Defines the notification style. Options: `'error'`, `'info'`, `'success'`, and `'warning'`. - Default is `'error'`.

- **config** (type [NOTIFY_CONFIG](https://www.theui.dev/docs/types#notification-configuration)) - An optional object to configure the notification's behavior and appearance.

Call `notify` in the browser, such as from an event handler, `$effect` or `onMount`. A call during server rendering does nothing, so one visitor's message never reaches another.

#### Configuration Options

- **removeAfter** (type number | false) - Duration in milliseconds before the notification disappears. Set to `false` for persistent notifications. - Default is `4000`.

- **removeOnClick** (type boolean) - Determines if the notification should close when clicked. - Default is `true`.

- **rounded** (type [ROUNDED](https://www.theui.dev/docs/types#rounded-type)) - Controls the border radius. - Default is `'md'`.

- **theme** (type string) - Sets the notification theme. Options: `'default'`, `'soft'`, `'gradient'`. - Default is `'default'`.

- **variant** (type string) - Defines the notification style. Options: `'card'`, `'borderTop'`, `'borderBottom'`, `'borderStart'`. - Default is `'card'`.

## Accessibility

The Notification component is built with accessibility in mind, handling all necessary ARIA attributes, including `role="alert"`, `aria-live="assertive"` and `aria-atomic="true"`, so screen readers announce each notification as soon as it appears. These attributes are automatically applied, so you don't need to configure them manually.

The only consideration required is maintaining proper color contrast for the notification's text and background to ensure readability and compliance with accessibility standards.

## Configuration

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `position` | [NOTIFICATION_POSITION](https://www.theui.dev/docs/types#notification-position) | `top-end` | Position of the notifications on the screen. |
| `animationSpeed` | boolean | `true` | Enables or disables the show and hide animation of the notifications. |

### Functions

| Name | Description |
| --- | --- |
| `notify` | Triggers the notifications with customizable options. For more details, read the [notify() Function doc.](#notify-function) |

---

Category: Components
Keywords: notification, alert, message, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt