# Toast Props (свойства) для компонента Toast: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"primary\" | \"positive\" | \"negative\" | \"dark\" | \"light\"","value":[{"value":"\"default\""},{"value":"\"primary\""},{"value":"\"positive\""},{"value":"\"negative\""},{"value":"\"dark\""},{"value":"\"light\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\"","value":[{"value":"\"m\""}]}},{"name":"closeIconType","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"pilled","type":{"name":"boolean"}},{"name":"text","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"width","type":{"name":"string | number"}},{"name":"hasClose","type":{"name":"boolean"}},{"name":"textColor","type":{"name":"string"}},{"name":"onCloseButtonClick","type":{"name":"(() => void)"}}] ## Система подсказок Существует готовая система текстовых подсказок,
для использования которой необходимо обернуть приложение в  `ToastProvider` :
```jsx
import React from 'react';
import { ToastProvider } from '@salutejs/plasma-web';
export const App = () => (
<ToastProvider>
<div className="App">Hello, world!</div>
</ToastProvider>
);
```
# Toast Props (свойства) для компонента Toast: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"primary\" | \"positive\" | \"negative\" | \"dark\" | \"light\"","value":[{"value":"\"default\""},{"value":"\"primary\""},{"value":"\"positive\""},{"value":"\"negative\""},{"value":"\"dark\""},{"value":"\"light\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\"","value":[{"value":"\"m\""}]}},{"name":"closeIconType","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"pilled","type":{"name":"boolean"}},{"name":"text","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"width","type":{"name":"string | number"}},{"name":"hasClose","type":{"name":"boolean"}},{"name":"textColor","type":{"name":"string"}},{"name":"onCloseButtonClick","type":{"name":"(() => void)"}}] ## Система подсказок Существует готовая система текстовых подсказок,
для использования которой необходимо обернуть приложение в  `ToastProvider` : ```jsx
import React from 'react';
import { ToastProvider } from '@salutejs/plasma-web';
export const App = () => (
<ToastProvider>
<div className="App">Hello, world!</div>
</ToastProvider>
);
```
После этого, с помощью хука  `useToast`  можно получить доступ к управлению подсказками.
```jsx
import React from 'react'
import { useToast, Button } from '@salutejs/plasma-web'
export const MyComponent = () => {
const { showToast, hideToast } = useToast()
const onHide = () => {}
return (
<Button onClick={() => showToast({ text, position, timeout, fade, contentLeft, role, onHide })} />
)
}
```
# Toast Props (свойства) для компонента Toast: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"primary\" | \"positive\" | \"negative\" | \"dark\" | \"light\"","value":[{"value":"\"default\""},{"value":"\"primary\""},{"value":"\"positive\""},{"value":"\"negative\""},{"value":"\"dark\""},{"value":"\"light\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\"","value":[{"value":"\"m\""}]}},{"name":"closeIconType","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"pilled","type":{"name":"boolean"}},{"name":"text","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"width","type":{"name":"string | number"}},{"name":"hasClose","type":{"name":"boolean"}},{"name":"textColor","type":{"name":"string"}},{"name":"onCloseButtonClick","type":{"name":"(() => void)"}}] ## Система подсказок Существует готовая система текстовых подсказок,
для использования которой необходимо обернуть приложение в  `ToastProvider` : ```jsx
import React from 'react';
import { ToastProvider } from '@salutejs/plasma-web';
export const App = () => (
<ToastProvider>
<div className="App">Hello, world!</div>
</ToastProvider>
);
```
После этого, с помощью хука  `useToast`  можно получить доступ к управлению подсказками. ```jsx
import React from 'react'
import { useToast, Button } from '@salutejs/plasma-web'
export const MyComponent = () => {
const { showToast, hideToast } = useToast()
const onHide = () => {}
return (
<Button onClick={() => showToast({ text, position, timeout, fade, contentLeft, role, onHide })} />
)
}
```
`showToast`  имеет необязательный аргумент  `position` , отвечающий за позиционирование подсказки.
```ts
type Position = 'top' | 'bottom';
```
# Toast Props (свойства) для компонента Toast: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"primary\" | \"positive\" | \"negative\" | \"dark\" | \"light\"","value":[{"value":"\"default\""},{"value":"\"primary\""},{"value":"\"positive\""},{"value":"\"negative\""},{"value":"\"dark\""},{"value":"\"light\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\"","value":[{"value":"\"m\""}]}},{"name":"closeIconType","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"pilled","type":{"name":"boolean"}},{"name":"text","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"width","type":{"name":"string | number"}},{"name":"hasClose","type":{"name":"boolean"}},{"name":"textColor","type":{"name":"string"}},{"name":"onCloseButtonClick","type":{"name":"(() => void)"}}] ## Система подсказок Существует готовая система текстовых подсказок,
для использования которой необходимо обернуть приложение в  `ToastProvider` : ```jsx
import React from 'react';
import { ToastProvider } from '@salutejs/plasma-web';
export const App = () => (
<ToastProvider>
<div className="App">Hello, world!</div>
</ToastProvider>
);
```
После этого, с помощью хука  `useToast`  можно получить доступ к управлению подсказками. ```jsx
import React from 'react'
import { useToast, Button } from '@salutejs/plasma-web'
export const MyComponent = () => {
const { showToast, hideToast } = useToast()
const onHide = () => {}
return (
<Button onClick={() => showToast({ text, position, timeout, fade, contentLeft, role, onHide })} />
)
}
```
`showToast`  имеет необязательный аргумент  `position` , отвечающий за позиционирование подсказки. ```ts
type Position = 'top' | 'bottom';
```
`showToast`  имеет необязательный аргумент  `timeout` , отвечающий за время отображения подсказки.
Если аргумент не передается, по умолчанию подсказка отображается пока пользователь ее не закроет. Скрыть текущую подсказку в любой момент можно с помощью функции  `hideToast` . ## Аргументы функции  `showToast` | Название  | Тип       | Значение | Описание           |
|-----------|-----------|----------|--------------------|
|  `args`  |  `ShowToastArgs`  |          | Конфигурация toast |
```ts
import type { ReactNode } from 'react';
export interface ShowToastArgs {
/**
* Текстовая надпись
*/
text?: string;
/**
* Слот для контента слева, например `Icon`
*/
contentLeft?: ReactNode;
/**
* Место отображения подсказки
*/
position?: ToastPosition;
/**
* WAI-ARIA роль
*/
role?: ToastRole;
/**
* Отображать ли подложку блока подсказки
*/
fade?: boolean;
/**
* Значение для дополнительно отступа блока подсказки, считается в rem.
*/
offset?: number;
/**
* Блок подсказки c округлым border-radius
*/
pilled?: boolean;
/**
* Отображать ли иконку закрытия
*/
hasClose?: boolean;
/**
* Размер блока подсказки
*/
size?: string;
/**
* Вид блока подсказки
*/
view?: string;
/**
* Время отображения подсказки. Если не передать значение подсказка будет отображаться пока ее не закроют.
*/
timeout?: number;
/**
* Цвет текста (по умолчанию берётся цвет из view)
*/
textColor?: string;
/**
* callback срабатывающий в момент события hideToast
*/
onHide?: () => void;
/**
* callback срабатывающий в момент события showToast
*/
onShow?: () => void;
}
```
## Пример использования 
```jsx
import React from 'react'
import { useToast, ToastProvider, Button } from '@salutejs/plasma-web'
export function App() {
const ToastExample = () => {
const { showToast, hideToast } = useToast()
const onShow = () => {}
const onHide = () => {}
const toastData = {
text: 'Подсказка вызванная showToast',
textColor: 'cyan',
position: 'bottom',
role: 'status',
hasClose: true,
fade: false,
size: 'm',
view: 'default',
timeout: 3000,
onShow,
onHide
}
return <Button onClick={() => showToast(toastData)} text="Вызвать подсказку" />
}
return (
<ToastProvider>
<ToastExample />
</ToastProvider>
)
}
```
## Вид иконки Значения  `positive`  и  `negative`  свойства  `view`  изменяют цвет иконки. 
Чтобы цвет применился, установите в иконке свойство  `color`  со значением  `inherit` :
```jsx
import React from 'react'
import { IconBell } from '@salutejs/plasma-icons';
import { useToast, ToastProvider, Button, ViewContainer } from '@salutejs/plasma-web'
export function App() {
const Icon = () => <IconBell color="inherit" size="xs" />;
const ToastExample = () => {
const { showToast } = useToast()
const onShow = () => {}
const onHide = () => {}
const toastData = {
contentLeft: <Icon />,
text: 'Подсказка c иконкой',
position: 'bottom',
role: 'status',
hasClose: true,
fade: false,
size: 'm',
view: 'positive',
timeout: 3000,
onShow,
onHide
}
return <Button onClick={() => showToast(toastData)} text="Вызвать подсказку" />
}
return (
<ToastProvider>
<ToastExample />
</ToastProvider>
)
}
```