diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.mdx b/packages/circuit-ui/components/NotificationModal/NotificationModal.mdx
index c2760ad70d..c9623582f5 100644
--- a/packages/circuit-ui/components/NotificationModal/NotificationModal.mdx
+++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.mdx
@@ -23,32 +23,39 @@ The notification modal component communicates critical information while blockin
Place your NotificationModal directly in your JSX:
-```jsx
+```tsx
import { NotificationModal, Button } from '@sumup-oss/circuit-ui';
-import {useState} from 'react';
+import { useState } from 'react';
-const [open, setOpen] = useState(false);
+function Component() {
+ const [open, setOpen] = useState(false);
-return (
+ return (
<>
- setOpen(false)} headline="It's time to update your browser" actions={{
- primary: {
- children: 'Update now',
- onClick: update(),
- },
- secondary: {
- children: 'Not now',
- onClick: () => setOpen(false),
- },
- }}>
-
-
+ setOpen(false)}
+ headline="It's time to update your browser"
+ actions={{
+ primary: {
+ children: 'Update now',
+ onClick: update(),
+ },
+ secondary: {
+ children: 'Not now',
+ onClick: () => setOpen(false),
+ },
+ }}
+ />
>
-);
+ );
+}
```
-### with the `useModal` hook
+### With the `useModal` hook
+
First, wrap your application in the `ModalProvider`:
```tsx
@@ -69,24 +76,24 @@ export function SayHello({ name }) {
const handleClick = () => {
setModal({
- image: {
- src: '/images/illustration-update.svg',
- alt: '',
- },
- headline: "It's time to update your browser",
- body: "You'll soon need a more up-to-date browser to continue using SumUp.",
- actions: {
- primary: {
- children: 'Update now',
- onClick: update(),
- },
- secondary: {
- children: 'Not now',
- onClick: removeModal(),
- },
- },
- closeButtonLabel: 'Close',
- })
+ image: {
+ src: '/images/illustration-update.svg',
+ alt: '',
+ },
+ headline: "It's time to update your browser",
+ body: "You'll soon need a more up-to-date browser to continue using SumUp.",
+ actions: {
+ primary: {
+ children: 'Update now',
+ onClick: update(),
+ },
+ secondary: {
+ children: 'Not now',
+ onClick: removeModal(),
+ },
+ },
+ closeButtonLabel: 'Close',
+ });
};
return ;