Notification React Component

With Notification component you can show required messages that looks like Push (or Local) system notifications.

Contents

Notification Components

There are following components included:

  • Notification

Notification Props

NameTypeDefaultDescription
buttonReactNode

Notification button content

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-ios-light-glass dark:bg-ios-dark-glass'

Notifiaction bg color in iOS theme

colors.bgMaterialstring'bg-md-light-surface-5 dark:bg-md-dark-surface-5'

Notification bg color in Material theme

colors.deleteIconIosstring'fill-stone-400 active:fill-stone-200 dark:fill-stone-500 dark:active:fill-stone-700'

Notification Delete Icon color in IOS theme

colors.deleteIconMdstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Notification Delete Icon color in Material theme

colors.subtitleIosstring'text-black dark:text-white'

Notification subtitle color in IOS theme

colors.textMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Notification text color in Material theme

colors.titleIosstring'text-black dark:text-white'

Notification title color in IOS theme

colors.titleRightIosstring'text-black/45 dark:text-white/45'

Notification right text color in IOS theme

colors.titleRightMdstring'text-md-light-on-surface-variant before:bg-md-light-on-surface-variant dark:text-md-dark-on-surface-variant before:dark:bg-md-dark-on-surface-variant'

Notification right text color in Material theme

componentstring'div'

Component's HTML Element

iconReactNode

Notification icon HTML layout or image

onClosefunction(e)

Click handler on to close element

openedbooleanundefined

Allows to open/close Notification and set its initial state

subtitleReactNode

Content of the notification "subtitle" area

textReactNode

Content of the notification "text" area

titleReactNode

Content of the notification "title" area

titleRightTextReactNode

Content of the notification "title right text" area

Examples

Notification.jsx
import React, { useState, useEffect } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Block,
Notification,
Button,
Dialog,
DialogButton,
} from 'konsta/react';
import DemoIcon from '../components/DemoIcon';
export default function NotificationPage() {
const [notificationFull, setNotificationFull] = useState(false);
const [notificationWithButton, setNotificationWithButton] = useState(false);
const [notificationCloseOnClick, setNotificationCloseOnClick] =
useState(false);
const [notificationCallbackOnClose, setNotificationCallbackOnClose] =
useState(false);
const [alertOpened, setAlertOpened] = useState(false);
const openNotification = (setter) => {
setNotificationFull(false);
setNotificationWithButton(false);
setNotificationCloseOnClick(false);
setNotificationCallbackOnClose(false);
setter(true);
};
useEffect(() => {
let timer;
if (notificationFull) {
timer = setTimeout(() => {
setNotificationFull(false);
}, 3000);
}
return () => clearTimeout(timer);
}, [notificationFull]);
return (
<Page>
<Navbar
title="Notification"
/>
<Notification
opened={notificationFull}
icon={<DemoIcon />}
title="Konsta UI"
titleRightText="now"
subtitle="This is a subtitle"
text="This is a simple notification message"
/>
<Notification
opened={notificationWithButton}
icon={<DemoIcon />}
title="Konsta UI"
button
onClick={() => setNotificationWithButton(false)}
subtitle="Notification with close button"
text="Click (x) button to close me"
/>
<Notification
opened={notificationCloseOnClick}
icon={<DemoIcon />}
title="Konsta UI"
titleRightText="now"
subtitle="Notification with close on click"
text="Click me to close"
onClick={() => setNotificationCloseOnClick(false)}
/>
<Notification
opened={notificationCallbackOnClose}
icon={<DemoIcon />}
title="Konsta UI"
titleRightText="now"
subtitle="Notification with close on click"
text="Click me to close"
onClick={() => {
setNotificationCallbackOnClose(false);
setAlertOpened(true);
}}
/>
<Dialog
opened={alertOpened}
onBackdropClick={() => setAlertOpened(false)}
title="Konsta UI"
content="Notification closed"
buttons={
<DialogButton onClick={() => setAlertOpened(false)}>Ok</DialogButton>
}
/>
<Block inset strong className="space-y-4">
<p>
Konsta UI comes with simple Notifications component that allows you to
show some useful messages to user and request basic actions.
</p>
<div className="grid gap-4 sm:grid-cols-2">
<Button rounded onClick={() => openNotification(setNotificationFull)}>
Full layout notification
</Button>
<Button
rounded
onClick={() => openNotification(setNotificationWithButton)}
>
With Close Button
</Button>
<Button
rounded
onClick={() => openNotification(setNotificationCloseOnClick)}
>
Click to Close
</Button>
<Button
rounded
onClick={() => openNotification(setNotificationCallbackOnClose)}
>
Callback on Close
</Button>
</div>
</Block>
</Page>
);
}
Code licensed under MIT.
2025 © Konsta UI by nolimits4web.