Notification

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.

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.

<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.

<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!".

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".

<Notification position="bottom-end" />

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.

<Notification animationSpeed={false} />

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".

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

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.

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

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

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).

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

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.

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

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) - Defines the notification style. Options: 'error', 'info', 'success', and 'warning'.
  - Default is 'error'.
• config (type NOTIFY_CONFIG) - 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.

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.