ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-modal-title

Modal headers should include ModalTitle so modal dialogs expose a clear accessible title.

We recommend using ModalTitle, but if a custom implementation is required, use titleId from the useModal() hook to provide the modal's accessible name.

Examples

This rule warns when ModalHeader does not include a ModalTitle.

Incorrect

import ModalDialog from '@atlaskit/modal-dialog/modal-dialog';
import { ModalHeader } from '@atlaskit/modal-dialog/modal-header';

<ModalDialog>
    <ModalHeader>
        <h1>New issue</h1>
    </ModalHeader>
</ModalDialog>;
import { ModalHeader } from '@atlaskit/modal-dialog/modal-header';

<ModalHeader>
    <h1>New issue</h1>
</ModalHeader>;

Correct

import ModalDialog from '@atlaskit/modal-dialog/modal-dialog';
import { ModalHeader } from '@atlaskit/modal-dialog/modal-header';

<ModalDialog>
    <ModalHeader>
        <ModalTitle>New issue</ModalTitle>
    </ModalHeader>
</ModalDialog>;
import { ModalHeader } from '@atlaskit/modal-dialog/modal-header';

<ModalHeader>
    <ModalTitle>New issue</ModalTitle>
</ModalHeader>;
Was this page helpful?
We use this feedback to improve our documentation.
  • Design system
    • Get started
    • Foundations
    • Components
    • Rovo UI
    • Tools
    • Release phases
    • Contact us
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License