Notification
Notifications are used to notify users of an event or communicate changes as a result of user actions. For instance if an error needs to be displayed to the user, a notification could be used, or one could use notifications to tell the user that their form was submitted sucessfully. Notifications often serve to provide user feedback.
Basic Usage
<triton-notification>
Notification text
</triton-notification>
<TritonNotification>
Notification text
</TritonNotification>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-notification>
Notification text
</triton-notification>
</body>
</html>
Behavior
Timeout
The component emits a void-type event with name atClose after a specified timeout provided in milliseconds.
The same event is triggered when the user attempts to manually dismiss the notification.
<triton-notification timeout="5000">
This notification will time out soon!
</triton-notification>
Appearance
Custom Icon
Pass a valid TritonIcon name to the custom-icon property to set a custom icon in the notification.
<triton-notification customIcon="map">
This notification has a custom icon!
</triton-notification>
Skin
Use the skin property to set an appropriate skin for the type of noticiation. This also sets the icon.
Certain skins have variants for both day and dusk theme.
<triton-notification skin="neutral">Hello, neutral skin</triton-notification>
<triton-notification skin="information">Hello, information skin</triton-notification>
...
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
custom-icon | Override icon in notification with icon string | Icon | - |
elevation | Shadow applied to the card for elevation | 2 3 4 | '3' |
fluid | If true, the element fills all available width | boolean | false |
show-close | If false, the notification will not have the x button that lets the user close it | boolean | true |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
skin | Set the skin of the component from preset optionsThe skin determines how the component looks | alarm critical flat information neutral primary secondary success warning | 'primary' |
timeout | Milliseconds to self-close. Emits atClose event on timeout. | number | -1 |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atClose | CustomEvent<void> | Dispatched void-type event when notificationis closed manually or times out | - |
Slots
Main
This slot can take any markup element.
<triton-notification>
<div></div>
</triton-notification>