Modal Header

The lightning-modal-header component displays header text in a panel at the top of a modal dialog. Use of a header is optional, but when you provide a header you must specify the header text with the label attribute.

If you don't use the lightning-modal-header component, you must set a label in the modal you create by extending LightningModal. A label is required for accessibility.

The modal components render in the order they appear in the template. Place the lightning-modal-header component before the lightning-modal-body component in the template.

lightning-modal-header supports optional tagline text, which displays in smaller text below the heading. Enclose the tagline text directly in the lightning-modal-header component, no HTML tag or attribute is needed. You can include links with <a> tags, which are the only HTML elements permitted. If the header text is too long to fit on one line, it wraps in the modal header.

This sample code shows the expected order of the modal components. The modal content is created in a separate component extended from LightningModal. See Lightning Web Components Developer Guide

lightning-modal-header implements the modals blueprint in the Salesforce Lightning Design System (SLDS).

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Modals: Styling Hooks Overview for documentation on component-specific hooks for this component.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

When you use lightning-modal-header in your modal, the rendered modal provides an aria-labelledby attribute set to the ID of the header element. If you don't use lightning-modal-header, the accessible label is provided using aria-label set to the label you provide in the modal.

When the modal opens, focus goes to the first interactive element in the modal. If the header includes a link in tagline text, the link gets initial focus.

See Lightning Web Components Developer Guide for more information about accessibility in modals.