Components / Feedback
Alert
Component + managerManages display of alerts, including auto-delete and optional callbacks.
Live preview
Interactive exampleUsage
Import the component and its manager, then make it your own.
Component
AlertManager
create_alert_manager<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
| Property | Type | Default | Description |
|---|---|---|---|
alerts | array | [] | initial list of alerts |
is_small_screen | boolean | false | whether the layout adjusts for smaller screens |
x_color | string | var(--g7-t) | color for the x dismiss icon |
border_radius | number | 1 | rem-based border radius for the alert |
success_icon_color | string | var(--success-t) | color for the success check icon |
error_icon_color | string | var(--error-t) | color for the error x icon |
on_alert_added | function | null | callback triggered each time a new alert is created |