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 ;