Skip to main content
2.0.0Next2.0.92.0.82.0.72.0.62.0.52.0.42.0.32.0.22.0.12.0.01.0.0
Version: 2.0.0

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>
Notification text

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.

Fire 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.

This notification has a custom icon!
<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. Certain skins have variants for both day and dusk theme.

Hello, neutral skinHello, information skinHello, success skinHello, flat skin. We don't even have shadows here.Hello, warning skinHello, alarm skin Hello, critical skin
<triton-notification skin="neutral">Hello, neutral skin</triton-notification>
...

Playground

I will time out and emit an event

API

Properties

PropertyDescriptionTypeDefault
custom-iconOverride icon in notification with icon stringIcon-
fluidIf true, the element fills all available widthbooleanfalse
show-closeIf true, the element fills all available widthbooleantrue
sizeSet the size of the componentbase body large medium small tiny xlarge xxlarge xxxlargedefaultOptions.baseSize
skinSet the skin of the component from preset optionsThe skin determines how the component looksalarm critical flat information neutral primary secondary success warning'primary'
timeoutMilliseconds to self-close. Emits atClose event on timeout.number-1

Events

NameTypeDescriptionExtra
atCloseCustomEvent<void>Dispatched void-type event when notificationis closed manually or times out-

Slots

This slot can take any markup element.

<triton-notification>
<div slot="This slot can take any markup element."></div>
</triton-notification>

Details

Depends on