Modal

New

Default

Use the modal to

Delete item

Are you sure you want to delete this item?

Show code

<button type="button" class="govuk-button" data-iai-modal-open="html-modal" data-testid="open">
    Open modal
</button>

<dialog id="html-modal" class="iai-modal" tabindex="-1" aria-labelledby="html-modal-title" data-module="iai-modal"
    data-testid="modal">
    <div class="iai-modal__container">
        <h2 class="govuk-heading-m iai-modal__title" id="html-modal-title">
            Delete item
        </h2>
        <div class="iai-modal__body">
            <p class="govuk-body">Are you sure you want to delete this item?</p>
        </div>
        <div class="iai-modal__footer govuk-button-group">
            <button type="button" class="govuk-button govuk-button--warning" data-iai-modal-close data-testid="confirm">
                Delete
            </button>
            <button type="button" class="govuk-button govuk-button--secondary" data-iai-modal-close
                data-testid="cancel">
                Cancel
            </button>
        </div>
    </div>
</dialog>

---
import {
    Button,
    Modal,
    ModalTitle,
    ModalBody,
    ModalFooter,
} from "@i-dot-ai-npm/component-library-astro";
---

<Button type="button" data-iai-modal-open="astro-modal" data-testid="open">
    Open modal
</Button>

<Modal id="astro-modal" aria-labelledby="astro-modal-title" data-testid="modal">
    <ModalTitle id="astro-modal-title">Delete item</ModalTitle>
    <ModalBody>
        <p class="govuk-body">Are you sure you want to delete this item?</p>
    </ModalBody>
    <ModalFooter>
        <Button
            type="button"
            warning
            data-iai-modal-close
            data-testid="confirm"
        >
            Delete
        </Button>
        <Button
            type="button"
            secondary
            data-iai-modal-close
            data-testid="cancel"
        >
            Cancel
        </Button>
    </ModalFooter>
</Modal>

import { useState } from "react";
import {
    Button,
    Modal,
    ModalTitle,
    ModalBody,
    ModalFooter,
} from "@i-dot-ai-npm/component-library-react";

export default function ReactModal() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Button type="button" data-testid="open" onClick={() => setOpen(true)}>
                Open modal
            </Button>

            <Modal
                open={open}
                onClose={() => setOpen(false)}
                aria-labelledby="react-modal-title"
                data-testid="modal">
                <ModalTitle id="react-modal-title">Delete item</ModalTitle>
                <ModalBody>
                    <p className="govuk-body">Are you sure you want to delete this item?</p>
                </ModalBody>
                <ModalFooter>
                    <Button type="button" warning data-testid="confirm" onClick={() => setOpen(false)}>
                        Delete
                    </Button>
                    <Button type="button" secondary data-testid="cancel" onClick={() => setOpen(false)}>
                        Cancel
                    </Button>
                </ModalFooter>
            </Modal>
        </>
    );
}

<script lang="ts">
    import {
        Button,
        Modal,
        ModalTitle,
        ModalBody,
        ModalFooter,
    } from "@i-dot-ai-npm/component-library-svelte";

    let open = $state(false);
</script>

<Button type="button" data-testid="open" onclick={() => (open = true)}>
    Open modal
</Button>

<Modal
    {open}
    onClose={() => (open = false)}
    aria-labelledby="svelte-modal-title"
    data-testid="modal"
>
    <ModalTitle id="svelte-modal-title">Delete item</ModalTitle>
    <ModalBody>
        <p class="govuk-body">Are you sure you want to delete this item?</p>
    </ModalBody>
    <ModalFooter>
        <Button type="button" warning data-testid="confirm" onclick={() => (open = false)}>
            Delete
        </Button>
        <Button type="button" secondary data-testid="cancel" onclick={() => (open = false)}>
            Cancel
        </Button>
    </ModalFooter>
</Modal>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import {
    Button,
    Modal,
    ModalTitle,
    ModalBody,
    ModalFooter,
} from "@i-dot-ai-npm/component-library-solid";

export default function SolidModal() {
    const [open, setOpen] = createSignal(false);

    return (
        <>
            <Button type="button" data-testid="open" onClick={() => setOpen(true)}>
                Open modal
            </Button>

            <Modal
                open={open()}
                onClose={() => setOpen(false)}
                aria-labelledby="solid-modal-title"
                data-testid="modal">
                <ModalTitle id="solid-modal-title">Delete item</ModalTitle>
                <ModalBody>
                    <p class="govuk-body">Are you sure you want to delete this item?</p>
                </ModalBody>
                <ModalFooter>
                    <Button type="button" warning data-testid="confirm" onClick={() => setOpen(false)}>
                        Delete
                    </Button>
                    <Button type="button" secondary data-testid="cancel" onClick={() => setOpen(false)}>
                        Cancel
                    </Button>
                </ModalFooter>
            </Modal>
        </>
    );
}

When to use this component

Always include the Back link component on GOV.UK Question pages in your service.

You can include a back link on other pages within a multi-page transaction, if it makes sense to do so.

When not to use this component

Never use the back link component together with the Breadcrumbs component. If necessary, you should do research with your users to learn which they find more helpful in your service.