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

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', 'light', and 'gradient'. The 'default' theme follows the standard notification styling, the 'light' theme provides a softer color palette for a more subtle look, and the 'gradient' theme introduces a bold, eye-catching background with smooth color transitions.

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

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', 'barTop', 'barBottom', and 'barStart'.

The default variant, 'card', follows a standard notification style without extra elements. The other three variants — 'barTop', 'barBottom', and 'barStart' — add a thin line to the respective side of the notification. This subtle design change helps visually distinguish notifications without making them too complex.

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

notify("Hello world!", "success", {theme: "light", 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 Alert component is built with accessibility in mind, handling all necessary ARIA attributes, including role="alert" and aria-label="Close alert", to ensure compatibility with assistive technologies. 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 alert's text and background to ensure readability and compliance with accessibility standards.

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

• msg (type string) – The message displayed in the notification.
• 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.