Notification

Visualization & Interaction

Display a notification

Global Provider
Custom Notifications
Closable
Custom Duration

Quickstart #

<script>
	import { NotificationProvider, Notification, Button } from "@steeze-ui/components"
</script>

<Button on:click={() => {
	Notification.show({title:"Successfully saved!",type:"success"})
}}>Show</Button>

<NotificationProvider duration={3000} />

API Reference #

Property	Type	Default
`position`	`NotificationPosition`	`bottom-end`
`duration`	`Number`	`5000`
`closable`	`Boolean`	`true`

Styling #

Name	Default
`--st-notification-container-padding`	`0.75rem`
`--st-notification-gap`	`0.25rem`
`--st-notification-padding`	`1rem`
`--st-notification-border-radius`	`--st-border-radius-lg`
`--st-notification-bg-color`	`--st-overlay-bg-color`
`--st-notification-color`	`--st-overlay-color`
`--st-notification-border-color`	`--st-overlay-border-color`
`--st-notification-font-size`	`--st-font-size-sm`
`--st-notification-font-weight`	`--st-font-weight-medium`
`--st-notification-title-color`	`--st-body-text-color`
`--st-notification-description-color`	`--st-secondary-text-color`

Examples #

Render a custom Notification

<script>
  import { NotificationProvider, Notification, Button } from "@steeze-ui/components"
</script>

<Button on:click={() => {
	Notification.show({customProp:"My Notification!"})
}}>Show</Button>

<NotificationProvider duration={3000}>
	<div slot="default" role="alert" aria-live="polite" let:item>
		<p>{item.customProp}</p>
	</div>
</NotificationProvider>