> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# AlertingDialogHeader

- Package: [@gooddata/sdk-ui-dashboard](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/index.md)
- Kind: variable
- Stability: beta
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-dashboard/src/presentation/automations/alerting/blocks/AlertingDialogHeader.tsx

> **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

The alerting dialog's header region (the title input row), connected to the dialog's state.

Renders [DefaultAlertingDialogHeader](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultalertingdialogheader/index.md) with the props of [useAlertingDialogHeaderProps()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.usealertingdialogheaderprops/index.md). Every prop passed here replaces the hook's value for that prop wholesale; pass the dialog's `onCancel` so the back button closes the dialog, and `ref` to receive the title input. Renders nothing while `useAlertingDialogContext().isLoading` is true.

**Signature:**

```typescript
AlertingDialogHeader: import("react").ForwardRefExoticComponent<Partial<IAlertingDialogHeaderProps> & import("react").RefAttributes<HTMLInputElement>>
```

## Example

```tsx
function MyAlertingDialog(props: IAlertingDialogProps) {
    return (
        <MyShell onClose={props.onCancel}>
            <AlertingDialogHeader onCancel={props.onCancel} />
            <AlertingDialogFilters />
        </MyShell>
    );
}
<Dashboard AlertingDialogComponent={MyAlertingDialog} />;
```