# ModalHeader
**📖 Live documentation:** https://cds.coinbase.com/components/overlay/ModalHeader/
A component that provides a consistent header section for Modal.
## Import
```tsx
import { ModalHeader } from '@coinbase/cds-web/overlays/modal/ModalHeader'
```
## Examples
ModalHeader provides a consistent header section for [Modal](/components/overlay/Modal). It displays a centered title with optional back and close buttons that integrate with Modal's context.
### Basics
Pass a `title` to display centered text. The close button automatically appears and uses Modal's `onRequestClose` handler.
```jsx live
function BasicExample() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(false)} visible={visible}>
Modal content goes here.
);
}
```
### Back Button
Use `onBackButtonClick` to show a back arrow for multi-step flows. The back button appears on the left side of the header.
```jsx live
function BackButtonExample() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(false)} visible={visible}>
setVisible(false)}
backAccessibilityLabel="Go back"
closeAccessibilityLabel="Close"
/>
Step 2 of 3
);
}
```
### Title Only
Omit buttons by not providing `onBackButtonClick` and setting `hideCloseButton` on the Modal.
```jsx live
function TitleOnlyExample() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(false)} visible={visible}>
Please wait while we process your request.
);
}
```
### Styling
#### Spacing
ModalHeader extends [Box](/components/layout/Box) and supports style props like `paddingX` and `paddingY` to customize spacing.
```jsx live
function SpacingExample() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(false)} visible={visible}>
The header has increased padding.
);
}
```
#### Without Divider
Set `hideDividers` on Modal to remove the bottom border from the header.
```jsx live
function NoDividerExample() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(false)} visible={visible}>
The header has no bottom border.
);
}
```
### Accessibility
Always provide `closeAccessibilityLabel` for the close button and `backAccessibilityLabel` when using the back button. These labels are announced by screen readers.
```jsx live
function AccessibilityExample() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(false)} visible={visible}>
setVisible(false)}
backAccessibilityLabel="Go back to account selection"
backAccessibilityHint="Returns to the previous step"
closeAccessibilityLabel="Close transfer modal"
closeAccessibilityHint="Cancels the transfer and returns to the main screen"
/>
Enter transfer details.
);
}
```
### Composed Examples
#### Multi-Step Wizard
Use `onBackButtonClick` to navigate between steps in a wizard flow.
```jsx live
function WizardExample() {
const [visible, setVisible] = useState(false);
const [step, setStep] = useState(1);
const titles = ['Select Asset', 'Enter Amount', 'Confirm Transfer'];
const handleClose = () => {
setVisible(false);
setStep(1);
};
return (
<>
1 ? () => setStep((s) => s - 1) : undefined}
backAccessibilityLabel="Go back"
closeAccessibilityLabel="Close"
/>
Step {step} of 3
{step === 1 && 'Choose which asset to transfer.'}
{step === 2 && 'Enter the amount you want to send.'}
{step === 3 && 'Review and confirm your transfer.'}
setStep((s) => s + 1) : handleClose}>
{step < 3 ? 'Continue' : 'Confirm'}
}
secondaryAction={
}
/>
);
}
```
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `alignContent` | `ResponsiveProp