Ui.Notifications

A global component to display notifications.

  • Notifications are displayed in the top-right corner of the screen.
  • By default a notification remains on the screen for 7 seconds.
  • Any HTML or component can be the body of the notification.
  • Clicking on the notification dismisses it.
  • There is an indicator of the remaining time .
Basic Usage

You can display a notification using the Ui.Notifications.notifyDefault(content) function.

<Ui.Button
label="Show notification!"
onClick={
(event : Html.Event) {
Ui.Notifications.notifyDefault(<>"Notification!"</>)
}
}
/>
Advanced Usage

If you need more control over the duration can use the Ui.Notifications.notify(content, duration) function.

<>
<Ui.Button
onClick={
(event : Html.Event) {
Ui.Notifications.notify(<>"Notification!"</>, 2000)
}
}
label="Show notification!"
/>
</>
Content

The content of the notification can be any Html

<>
<Ui.Button
label="Show text with an icon!"
onClick={
(event : Html.Event) {
Ui.Notifications.notify(
<Ui.Container gap={Ui.Size.Em(0.75)}>
<Ui.Icon icon={Ui.Icons.CHECK}/>
"It's done"
</Ui.Container>, 2000)
}
}
/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.