# Notification Компонент группы Overlay, является всплывающим элементом поверх контента. ## Быстрый старт Используйте комбинацию компонента  `NotificationsProvider`  и метода  `addNotification`  для вызова компонента  `Notification` . :::info
Notifications закрываются автоматически по истечению указанного  `timeout`  в миллисекундах или если передан  `0`  или  `null`  то будут висеть бесконечно.
::: 
:::info
`addNotification`  возвращает сгенерированный или переданный  `id` , по которому можно закрыть  `Notification`  через вызов  `closeNotification` .
::: 
:::info
`onTimeoutClose`  - вызывается при автоматическом закрытии по timeout
::: ## NotificationsProvider :::tip
`frame`  - с помощью данного свойства можно указать через, id элемента или ref для него, в каком контейнере будет позиционирование(по умолчанию document).
::: `NotificationsProvider`  может использоваться как в корне приложения или по месту применения в любой части приложения. 
### Позиционирование С помощью свойства  `placement`  у компонента  `NotificationsProvider`  можно задать позиционирование для Notification. 
И производные комбинации, например  `bottom-left`  или  `top-right` . 
## Управлением внешним видом Регулируется свойством  `view` . :::tip
Используйте значение  `inherit`  для свойства  `color` , чтобы цвет наследовался от  `view`  компонента  `Notification` . 
::: ### Переопределение цвета у заголовка и контентной части Для  переопределения  значений  `color`  текста контента  `children`  и заголовка  `title`  используйте свойства:  `titleColor, textColor` . 
### Управление шириной уведомления Для управления шириной компонента доступны следующие свойства: `width`  — устанавливает ширину компонента. `maxWidth`  — устанавливает максимальную ширину компонента. Оба свойства принимает любые действительные CSS значения для  width  и  maxWidth 
## Notification props Props (свойства) для компонента Notification: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"positive\" | \"warning\" | \"negative\" | \"info\"","value":[{"value":"\"default\""},{"value":"\"positive\""},{"value":"\"warning\""},{"value":"\"negative\""},{"value":"\"info\""}]}},{"name":"layout","type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},{"name":"size","type":{"name":"enum","raw":"\"xs\" | \"xxs\"","value":[{"value":"\"xs\""},{"value":"\"xxs\""}]}},{"name":"closeIconType","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"title","type":{"name":"ReactNode"}},{"name":"children","type":{"name":"ReactNode"}},{"name":"status","type":{"name":"string"}},{"name":"maxWidth","type":{"name":"MaxWidth<string | number>"}},{"name":"width","type":{"name":"Width<string | number>"}},{"name":"actions","type":{"name":"ReactNode"}},{"name":"icon","type":{"name":"ReactNode"}},{"name":"UNSAFE_SSR_ENABLED","type":{"name":"boolean"}},{"name":"iconPlacement","type":{"name":"enum","raw":"\"top\" | \"left\"","value":[{"value":"\"top\""},{"value":"\"left\""}]}},{"name":"showCloseIcon","type":{"name":"boolean"}},{"name":"customCloseIcon","type":{"name":"ReactNode"}},{"name":"textColor","type":{"name":"string"}},{"name":"titleColor","type":{"name":"string"}},{"name":"backgroundColor","type":{"name":"string"}},{"name":"onCloseButtonClick","type":{"name":"(() => void)"}},{"name":"onTimeoutClose","type":{"name":"(() => void)"}}] ## Notifications provider props Props (свойства) для компонента NotificationsProvider: [{"name":"frame","type":{"name":"string"}},{"name":"placement","type":{"name":"enum","raw":"PopupPlacement","value":[{"value":"\"center\""},{"value":"\"top\""},{"value":"\"bottom\""},{"value":"\"right\""},{"value":"\"left\""},{"value":"\"top-right\""},{"value":"\"top-left\""},{"value":"\"bottom-right\""},{"value":"\"bottom-left\""}]}},{"name":"UNSAFE_SSR_ENABLED","type":{"name":"boolean"}}]