> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/24.notification.md).

# Notification

### Notification Props <a href="#notification-props" id="notification-props"></a>

| Name                 | Type    | Default                                                                                                                                                 | Description                                                                           |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| colors               | object  |                                                                                                                                                         | Object with Tailwind CSS colors classes                                               |
| colors.bgIos         | string  | 'bg-white dark:bg-\[#1e1e1e]'                                                                                                                           | Notifiaction bg color in iOS theme                                                    |
| colors.bgMaterial    | string  | 'bg-md-light-surface-5 dark:bg-md-dark-surface-5'                                                                                                       | Notification bg color in Material theme                                               |
| colors.deleteIconIos | string  | 'fill-stone-400 active:fill-stone-200 dark:fill-stone-500 dark:active:fill-stone-700'                                                                   | Notification Delete Icon color in IOS theme                                           |
| colors.deleteIconMd  | string  | 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'                                                                                 | Notification Delete Icon color in Material theme                                      |
| colors.subtitleIos   | string  | 'text-black dark:text-white'                                                                                                                            | Notification subtitle color in IOS theme                                              |
| colors.textMaterial  | string  | 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'                                                                                 | Notification text color in Material theme                                             |
| colors.titleIos      | string  | 'text-black dark:text-white'                                                                                                                            | Notification title color in IOS theme                                                 |
| colors.titleRightIos | string  | 'text-opacity-45 text-black dark:text-white dark:text-opacity-45'                                                                                       | Notification right text color in IOS theme                                            |
| colors.titleRightMd  | string  | '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                                       |
| component            | string  | 'div'                                                                                                                                                   | Component's HTML Element                                                              |
| opened               | boolean | undefined                                                                                                                                               | Allows to open/close Notification and set its initial state                           |
| subtitle             | string  |                                                                                                                                                         | Content of the notification "subtitle" area                                           |
| text                 | string  |                                                                                                                                                         | Content of the notification "text" area                                               |
| title                | string  |                                                                                                                                                         | Content of the notification "title" area                                              |
| titleRightText       | string  |                                                                                                                                                         | Content of the notification "title right text" area                                   |
| translucent          | boolean | true                                                                                                                                                    | Makes Notification background translucent (with `backdrop-filter: blur`) in iOS theme |

### Notification Events

| Name  | Type        | Description                       |
| ----- | ----------- | --------------------------------- |
| close | function(e) | Click handler on to close element |

### Notification Slots

| Name           | Description                                         |
| -------------- | --------------------------------------------------- |
| button         | Notification button content                         |
| icon           | Notification icon HTML layout or image              |
| subtitle       | Content of the notification "subtitle" area         |
| text           | Content of the notification "text" area             |
| title          | Content of the notification "title" area            |
| titlerighttext | Content of the notification "title right text" area |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <k-page>
    <k-navbar title="Notification" />

    <k-notification
      :opened="opened.notificationFull"
      title="Konsta UI"
      title-right-text="now"
      subtitle="This is a subtitle"
      text="This is a simple notification message"
    >
      <template #icon>
        <demo-icon />
      </template>
    </k-notification>

    <k-notification
      :opened="opened.notificationWithButton"
      title="Konsta UI"
      subtitle="Notification with close button"
      text="Click (x) button to close me"
      @click="() => (opened.notificationWithButton = false)"
    >
      <template #icon>
        <demo-icon />
      </template>
      <template #button />
    </k-notification>

    <k-notification
      :opened="opened.notificationCloseOnClick"
      title="Konsta UI"
      title-right-text="now"
      subtitle="Notification with close on click"
      text="Click me to close"
      @click="() => (opened.notificationCloseOnClick = false)"
    >
      <template #icon>
        <demo-icon />
      </template>
    </k-notification>

    <k-notification
      :opened="opened.notificationCallbackOnClose"
      title="Konsta UI"
      title-right-text="now"
      subtitle="Notification with close on click"
      text="Click me to close"
      @click="
        () => {
          opened.notificationCallbackOnClose = false;
          alertOpened = true;
        }
      "
    >
      <template #icon>
        <demo-icon />
      </template>
    </k-notification>
    <k-dialog
      :opened="alertOpened"
      @backdropclick="() => (alertOpened = false)"
    >
      <template #title>Konsta UI</template>
      Notification closed
      <template #buttons>
        <k-dialog-button @click="() => (alertOpened = false)">
          Ok
        </k-dialog-button>
      </template>
    </k-dialog>
    <k-block strong-ios outline-ios class="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>
      <p>
        <k-button @click="() => openNotification('notificationFull')">
          Full layout notification
        </k-button>
      </p>
      <p>
        <k-button @click="() => openNotification('notificationWithButton')">
          With Close Button
        </k-button>
      </p>
      <p>
        <k-button @click="() => openNotification('notificationCloseOnClick')">
          Click to Close
        </k-button>
      </p>
      <p>
        <k-button
          @click="() => openNotification('notificationCallbackOnClose')"
        >
          Callback on Close
        </k-button>
      </p>
    </k-block>
  </k-page>
</template>
<script>
  import { ref, watch } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlock,
    kNotification,
    kButton,
    kDialog,
    kDialogButton,
    useTheme,
  } from 'konsta/vue';
  import DemoIcon from '../components/DemoIcon.vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlock,
      kNotification,
      kButton,
      kDialog,
      kDialogButton,
      DemoIcon,
    },
    setup() {
      const opened = ref({
        notificationFull: false,
        notificationWithButton: false,
        notificationCloseOnClick: false,
        notificationCallbackOnClose: false,
      });
      const alertOpened = ref(false);
      const theme = useTheme();
      const openNotification = (setter) => {
        opened.value = {
          notificationFull: false,
          notificationWithButton: false,
          notificationCloseOnClick: false,
          notificationCallbackOnClose: false,
        };
        opened.value[setter] = true;
      };

      const autoCloseNotificationFull = () => {
        if (opened.value.notificationFull) {
          setTimeout(() => {
            opened.value.notificationFull = false;
          }, 3000);
        }
      };
      watch(() => opened.value.notificationFull, autoCloseNotificationFull);

      return {
        opened,
        alertOpened,
        openNotification,
        theme,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState, useEffect } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  Notification,
  Button,
  Dialog,
  DialogButton,
} from 'ina-ui/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="ina-ui UI"
        titleRightText="now"
        subtitle="This is a subtitle"
        text="This is a simple notification message"
      />
      <Notification
        opened={notificationWithButton}
        icon={<DemoIcon />}
        title="ina-ui UI"
        button
        onClick={() => setNotificationWithButton(false)}
        subtitle="Notification with close button"
        text="Click (x) button to close me"
      />
      <Notification
        opened={notificationCloseOnClick}
        icon={<DemoIcon />}
        title="ina-ui UI"
        titleRightText="now"
        subtitle="Notification with close on click"
        text="Click me to close"
        onClick={() => setNotificationCloseOnClick(false)}
      />
      <Notification
        opened={notificationCallbackOnClose}
        icon={<DemoIcon />}
        title="ina-ui 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="ina-ui UI"
        content="Notification closed"
        buttons={
          <DialogButton onClick={() => setAlertOpened(false)}>Ok</DialogButton>
        }
      />
      <Block strongIos outlineIos className="space-y-4">
        <p>
          ina-ui UI comes with simple Notifications component that allows you to
          show some useful messages to user and request basic actions.
        </p>
        <p>
          <Button onClick={() => openNotification(setNotificationFull)}>
            Full layout notification
          </Button>
        </p>
        <p>
          <Button onClick={() => openNotification(setNotificationWithButton)}>
            With Close Button
          </Button>
        </p>
        <p>
          <Button onClick={() => openNotification(setNotificationCloseOnClick)}>
            Click to Close
          </Button>
        </p>
        <p>
          <Button
            onClick={() => openNotification(setNotificationCallbackOnClose)}
          >
            Callback on Close
          </Button>
        </p>
      </Block>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/24.notification.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.