Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentAlert
Managercreate_alert_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Alert, create_alert_manager, Button, create_button_manager } from "sveltekit-ui"

  const manager = create_alert_manager({ border_radius: 1 })

  const notify_button = create_button_manager({
    text: "Show notification",
    on_click: () => manager.add_alert("Saved", "Your changes are ready.", "check"),
  })
</script>

<Button manager={notify_button} />
<Alert {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

7 entries in configuration

PropertyTypeDefaultDescription
alertsarray []initial list of alerts
is_small_screenboolean falsewhether the layout adjusts for smaller screens
x_colorstring var(--g7-t)color for the x dismiss icon
border_radiusnumber 1rem-based border radius for the alert
success_icon_colorstring var(--success-t)color for the success check icon
error_icon_colorstring var(--error-t)color for the error x icon
on_alert_addedfunction nullcallback triggered each time a new alert is created