toasts/notifications
Using Ant Design and the built in useNotificationProvider from refine/antd, how can i make custom ontifications
KHi @PIGFY. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. 
K----------------------
To create custom notifications using Ant Design and the built-in from
import React from "react";
import { useNotification } from "@refinedev/core";
import { Button, Col, Row } from "antd";
export const HomePage: React.FC = () => {
const { open, close } = useNotification();
To create custom notifications using Ant Design and the built-in from
@refinedev/antd- Import the necessary modules: You need to import from and from
.@refinedev/antd - Set up the component: Pass the to the prop of the component.
- Use the hook: This hook allows you to open and close notifications programmatically.
```tsx
import React from "react";
import { useNotification } from "@refinedev/core";
import { Button, Col, Row } from "antd";
export const HomePage: React.FC = () => {
const { open, close } = useNotification();
Kreturn (
<Row
gutter={[16, 16]}
style={{
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<Col>
<Button
type="primary"
onClick={() => {
open?.({
type: "success",
message: "Notification Title",
description: "This is the content of the notification.",
key: "notification-key",
});
}}
>
Open Notification
</Button>
</Col>
<Col>
<Button
type="default"
onClick={() => {
close?.("notification-key");
}}
>
Close Notification
</Button>
</Col>
</Row>
);
};
App.tsxRefineuseNotificationProvider@refinedev/antdHomePage.tsxuseNotificationuseNotification` hook** (https://refine.dev/docs/guides-concepts/notifications/#built-in-notification-providers).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
<Row
gutter={[16, 16]}
style={{
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<Col>
<Button
type="primary"
onClick={() => {
open?.({
type: "success",
message: "Notification Title",
description: "This is the content of the notification.",
key: "notification-key",
});
}}
>
Open Notification
</Button>
</Col>
<Col>
<Button
type="default"
onClick={() => {
close?.("notification-key");
}}
>
Close Notification
</Button>
</Col>
</Row>
);
};
App.tsxRefineuseNotificationProvider@refinedev/antdHomePage.tsxuseNotificationuseNotification` hook** (https://refine.dev/docs/guides-concepts/notifications/#built-in-notification-providers).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@368167875740958721 kapa.ai is still learning and improving, please let us know how it did by reacting below