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

# IDashboardCustomComponentProps

- Package: [@gooddata/sdk-ui-dashboard](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/index.md)
- Kind: interface
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-dashboard/src/presentation/dashboard/types.ts
- Guides: [Customize widgets and visualizations](https://www.gooddata.ai/docs/gooddata-ui/latest/dashboard-plugins/customize-widgets/index.md)

These props allow you to specify custom components or custom component providers that the Dashboard component will use for rendering different parts of the dashboard.

**Signature:**

```typescript
export interface IDashboardCustomComponentProps 
```

## Remarks

IMPORTANT: while this interface is marked as public, you also need to heed the maturity annotations on each property. A lot of these properties are at this moment alpha or internal level.

## Properties

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [AlertingDialogComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsalertingdialogcomponent) |  | [CustomAlertingDialogComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customalertingdialogcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the alerting dialog. |
| [AlertingDialogContextDecoratorComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsalertingdialogcontextdecoratorcomponent) |  | [CustomAlertingDialogContextDecoratorComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customalertingdialogcontextdecoratorcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to decorate the data the alerting dialog reads. Rendered between the dialog's data context and its state model; see `CustomAlertingDialogContextDecoratorComponent` for the contract and an example. |
| [AlertingManagementDialogComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsalertingmanagementdialogcomponent) |  | [CustomAlertingManagementDialogComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customalertingmanagementdialogcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the alerting management dialog. |
| [AlertingManagementDialogContextDecoratorComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsalertingmanagementdialogcontextdecoratorcomponent) |  | [CustomAlertingManagementDialogContextDecoratorComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customalertingmanagementdialogcontextdecoratorcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to decorate the data the alerting management dialog reads. Rendered between the connector-provided management dialog context and the resolved management dialog component; see `CustomAlertingManagementDialogContextDecoratorComponent` for the contract and an example. |
| [AutomationsContextDecoratorComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsautomationscontextdecoratorcomponent) |  | [CustomAutomationsContextDecoratorComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customautomationscontextdecoratorcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to decorate the data the automation dialogs' shared context carries. Rendered once per dialog tree, directly inside each connector-provided automations context; see `CustomAutomationsContextDecoratorComponent` for the contract and an example. |
| [ButtonBarComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsbuttonbarcomponent) |  | [CustomButtonBarComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.custombuttonbarcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the button bar. |
| [DashboardAttributeFilterComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsdashboardattributefiltercomponentprovider) |  | [OptionalAttributeFilterComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalattributefiltercomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify custom component to use for rendering all attribute filters or a factory function to customize the component per different attribute filter. |
| [DashboardContentComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsdashboardcontentcomponentprovider) |  | [OptionalDashboardContentComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionaldashboardcontentcomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify function to obtain custom component to use for extend rendering of dashboard content. |
| [DashboardDateFilterComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsdashboarddatefiltercomponentprovider) |  | [OptionalDateFilterComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionaldatefiltercomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the date filters. |
| [DashboardFilterGroupComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsdashboardfiltergroupcomponentprovider) |  | [OptionalFilterGroupComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalfiltergroupcomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify custom component to use for rendering all filter groups or a factory function to customize the component per different filter group. - If not provided, the default implementation [DefaultDashboardFilterGroup()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardfiltergroup/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardFilterGroup()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardfiltergroup/index.md). This is useful if you want to customize just one particular filter group and keep all other filter groups the same. - If you want to customize each filter in a filter group, use this provider and customize DefaultDashboardFilterGroup in it. It accepts some customization props fro deeper component. |
| [DashboardLayoutComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsdashboardlayoutcomponentprovider) |  | [OptionalDashboardLayoutComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionaldashboardlayoutcomponentprovider/index.md) | _(Optional)_ Specify function to obtain custom component to use for rendering a dashboard layout (nested). |
| [DashboardMeasureValueFilterComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsdashboardmeasurevaluefiltercomponentprovider) |  | [OptionalMeasureValueFilterComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalmeasurevaluefiltercomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the measure value filters. |
| [DrillDialogExportDropdownComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsdrilldialogexportdropdowncomponentprovider) |  | [OptionalDrillDialogExportDropdownComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionaldrilldialogexportdropdowncomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify the component rendered as drill dialog export dropdown. |
| [ErrorComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropserrorcomponent) |  | ComponentType<[IErrorProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md)> | **_(ALPHA)_** _(Optional)_ Component to render if embedding fails. |
| [FilterBarComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsfilterbarcomponent) |  | [CustomFilterBarComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customfilterbarcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the filter bar. |
| [InsightBodyComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsinsightbodycomponentprovider) |  | [OptionalInsightBodyComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalinsightbodycomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify function to obtain custom component to use for rendering an insight body (i.e. the insight itself) in the [DefaultDashboardInsight()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardinsight/index.md). |
| [InsightComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsinsightcomponentprovider) |  | [OptionalInsightComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalinsightcomponentprovider/index.md) | _(Optional)_ Specify function to obtain custom component to use for rendering an insight. |
| [InsightMenuButtonComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsinsightmenubuttoncomponentprovider) |  | [OptionalInsightMenuButtonComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalinsightmenubuttoncomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify function to obtain custom component to use for rendering an insight menu button. |
| [InsightMenuComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsinsightmenucomponentprovider) |  | [OptionalInsightMenuComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalinsightmenucomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify function to obtain custom component to use for rendering an insight menu. |
| [LayoutComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropslayoutcomponent) |  | [CustomDashboardLayoutComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customdashboardlayoutcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the layout. |
| [LoadingComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsloadingcomponent) |  | ComponentType<[ILoadingProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md)> | **_(ALPHA)_** _(Optional)_ Component to render while the dashboard or a widget is loading. |
| [MenuButtonComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsmenubuttoncomponent) |  | [CustomMenuButtonComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.custommenubuttoncomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the menu button. |
| [RestrictedFiltersPlaceholderComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsrestrictedfiltersplaceholdercomponentprovider) |  | [OptionalRestrictedFiltersPlaceholderComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalrestrictedfiltersplaceholdercomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify function to obtain a custom component reporting the filters the current user is not allowed to see. |
| [RestrictedPlaceholderComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsrestrictedplaceholdercomponentprovider) |  | [OptionalRestrictedPlaceholderComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalrestrictedplaceholdercomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify function to obtain a custom component standing in for an insight widget the current user is not allowed to see. |
| [RichTextComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsrichtextcomponentprovider) |  | [OptionalRichTextComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalrichtextcomponentprovider/index.md) | _(Optional)_ Specify function to obtain custom component to use for rendering a rich text. |
| [RichTextMenuComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsrichtextmenucomponentprovider) |  | [OptionalRichTextMenuComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalrichtextmenucomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify function to obtain custom component to use for rendering an rich text menu. |
| [SaveAsDialogComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropssaveasdialogcomponent) |  | [CustomSaveAsDialogComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customsaveasdialogcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the save as dialog. |
| [ScheduledEmailDialogComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsscheduledemaildialogcomponent) |  | [CustomScheduledEmailDialogComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customscheduledemaildialogcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the scheduled email dialog. |
| [ScheduledEmailDialogContextDecoratorComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsscheduledemaildialogcontextdecoratorcomponent) |  | [CustomScheduledEmailDialogContextDecoratorComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customscheduledemaildialogcontextdecoratorcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to decorate the data the scheduled email dialog reads. Rendered between the dialog's data context and its state model; see `CustomScheduledEmailDialogContextDecoratorComponent` for the contract and an example. |
| [ScheduledEmailManagementDialogComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsscheduledemailmanagementdialogcomponent) |  | [CustomScheduledEmailManagementDialogComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customscheduledemailmanagementdialogcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the scheduled email management dialog. |
| [ScheduledEmailManagementDialogContextDecoratorComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsscheduledemailmanagementdialogcontextdecoratorcomponent) |  | [CustomScheduledEmailManagementDialogContextDecoratorComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customscheduledemailmanagementdialogcontextdecoratorcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to decorate the data the scheduled email management dialog reads. Rendered between the connector-provided management dialog context and the resolved management dialog component; see `CustomScheduledEmailManagementDialogContextDecoratorComponent` for the contract and an example. |
| [ShareDialogComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropssharedialogcomponent) |  | [CustomShareDialogComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customsharedialogcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the share dialog. |
| [ShowAsTableButtonComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsshowastablebuttoncomponentprovider) |  | [OptionalShowAsTableButtonComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalshowastablebuttoncomponentprovider/index.md) | **_(ALPHA)_** _(Optional)_ Specify the component rendered as show as table button. |
| [SidebarComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropssidebarcomponent) |  | [CustomSidebarComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customsidebarcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the sidebar. |
| [TitleComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropstitlecomponent) |  | [CustomTitleComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customtitlecomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the title. |
| [TopBarComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropstopbarcomponent) |  | [CustomTopBarComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customtopbarcomponent/index.md) | **_(ALPHA)_** _(Optional)_ Specify component to use for rendering the top bar. |
| [VisualizationSwitcherComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsvisualizationswitchercomponentprovider) |  | [OptionalVisualizationSwitcherComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalvisualizationswitchercomponentprovider/index.md) | _(Optional)_ Specify function to obtain custom component to use for rendering a visualization switcher. |
| [VisualizationSwitcherToolbarComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropsvisualizationswitchertoolbarcomponentprovider) |  | [OptionalVisualizationSwitcherToolbarComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalvisualizationswitchertoolbarcomponentprovider/index.md) | _(Optional)_ Specify function to obtain custom component to use for rendering a visualization switcher toolbar. |
| [WidgetComponentProvider?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcustomcomponentprops/index.md#idashboardcustomcomponentpropswidgetcomponentprovider) |  | [OptionalWidgetComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalwidgetcomponentprovider/index.md) | _(Optional)_ Specify function to obtain custom component to use for rendering a widget. |

## Property details

### IDashboardCustomComponentProps.AlertingDialogComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the alerting dialog.

**Signature:**

```typescript
AlertingDialogComponent?: CustomAlertingDialogComponent;
```

### IDashboardCustomComponentProps.AlertingDialogContextDecoratorComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to decorate the data the alerting dialog reads.

Rendered between the dialog's data context and its state model; see `CustomAlertingDialogContextDecoratorComponent` for the contract and an example.

**Signature:**

```typescript
AlertingDialogContextDecoratorComponent?: CustomAlertingDialogContextDecoratorComponent;
```

### IDashboardCustomComponentProps.AlertingManagementDialogComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the alerting management dialog.

**Signature:**

```typescript
AlertingManagementDialogComponent?: CustomAlertingManagementDialogComponent;
```

### IDashboardCustomComponentProps.AlertingManagementDialogContextDecoratorComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to decorate the data the alerting management dialog reads.

Rendered between the connector-provided management dialog context and the resolved management dialog component; see `CustomAlertingManagementDialogContextDecoratorComponent` for the contract and an example.

**Signature:**

```typescript
AlertingManagementDialogContextDecoratorComponent?: CustomAlertingManagementDialogContextDecoratorComponent;
```

### IDashboardCustomComponentProps.AutomationsContextDecoratorComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to decorate the data the automation dialogs' shared context carries.

Rendered once per dialog tree, directly inside each connector-provided automations context; see `CustomAutomationsContextDecoratorComponent` for the contract and an example.

**Signature:**

```typescript
AutomationsContextDecoratorComponent?: CustomAutomationsContextDecoratorComponent;
```

### IDashboardCustomComponentProps.ButtonBarComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the button bar.

**Signature:**

```typescript
ButtonBarComponent?: CustomButtonBarComponent;
```

### IDashboardCustomComponentProps.DashboardAttributeFilterComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify custom component to use for rendering all attribute filters or a factory function to customize the component per different attribute filter.

**Signature:**

```typescript
DashboardAttributeFilterComponentProvider?: OptionalAttributeFilterComponentProvider;
```

#### Remarks

If you want to hide some or all filters, you can use the [HiddenDashboardAttributeFilter()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.hiddendashboardattributefilter/index.md) implementation.

- If not provided, the default implementation [DefaultDashboardAttributeFilter()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardattributefilter/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardAttributeFilter()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardattributefilter/index.md).  This is useful if you want to customize just one particular filter and keep all other filters the same. - Note this only affects attribute filter directly placed in filter bar. Filters placed in filter groups are not affected.  To customize filters in filter groups, use DashboardFilterGroupComponentProvider.

#### Example

Here is how to override the component for all filters:

```tsx
ComponentFactory: () => MyCustomComponent
```

### IDashboardCustomComponentProps.DashboardContentComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify function to obtain custom component to use for extend rendering of dashboard content.

**Signature:**

```typescript
DashboardContentComponentProvider?: OptionalDashboardContentComponentProvider;
```

#### Remarks

- If not provided, the default implementation  will be used. - If factory function is provided and it returns undefined, then the default implementation  will be used.  This is useful if you want to customize just one particular insight and keep default rendering for  the other insights.

### IDashboardCustomComponentProps.DashboardDateFilterComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the date filters.

**Signature:**

```typescript
DashboardDateFilterComponentProvider?: OptionalDateFilterComponentProvider;
```

### IDashboardCustomComponentProps.DashboardFilterGroupComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify custom component to use for rendering all filter groups or a factory function to customize the component per different filter group.

- If not provided, the default implementation [DefaultDashboardFilterGroup()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardfiltergroup/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardFilterGroup()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardfiltergroup/index.md).  This is useful if you want to customize just one particular filter group and keep all other filter groups the same. - If you want to customize each filter in a filter group, use this provider and customize DefaultDashboardFilterGroup in it.  It accepts some customization props fro deeper component.

**Signature:**

```typescript
DashboardFilterGroupComponentProvider?: OptionalFilterGroupComponentProvider;
```

### IDashboardCustomComponentProps.DashboardLayoutComponentProvider

Specify function to obtain custom component to use for rendering a dashboard layout (nested).

**Signature:**

```typescript
DashboardLayoutComponentProvider?: OptionalDashboardLayoutComponentProvider;
```

#### Remarks

- If not provided, the default implementation [DefaultDashboardLayout()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardlayout/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardLayout()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardlayout/index.md).  This is useful if you want to customize just one particular nested layout and keep default rendering for  the other nested layouts.

### IDashboardCustomComponentProps.DashboardMeasureValueFilterComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the measure value filters.

**Signature:**

```typescript
DashboardMeasureValueFilterComponentProvider?: OptionalMeasureValueFilterComponentProvider;
```

### IDashboardCustomComponentProps.DrillDialogExportDropdownComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify the component rendered as drill dialog export dropdown.

**Signature:**

```typescript
DrillDialogExportDropdownComponentProvider?: OptionalDrillDialogExportDropdownComponentProvider;
```

#### Remarks

If not provided, the default implementation  will be used.

### IDashboardCustomComponentProps.ErrorComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Component to render if embedding fails.

**Signature:**

```typescript
ErrorComponent?: ComponentType<IErrorProps>;
```

#### Remarks

This component is also used in all the individual widgets when they have some error occur.

### IDashboardCustomComponentProps.FilterBarComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the filter bar.

**Signature:**

```typescript
FilterBarComponent?: CustomFilterBarComponent;
```

#### Remarks

Note that if you override this component, the DashboardAttributeFilterComponentFactory and DashboardDateFilterComponent props might get ignored depending on your implementation.

### IDashboardCustomComponentProps.InsightBodyComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify function to obtain custom component to use for rendering an insight body (i.e. the insight itself) in the [DefaultDashboardInsight()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardinsight/index.md).

**Signature:**

```typescript
InsightBodyComponentProvider?: OptionalInsightBodyComponentProvider;
```

#### Remarks

- If not provided, the default implementation [DefaultInsightBody()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultinsightbody/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultInsightBody()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultinsightbody/index.md) will be used.  This is useful if you want to customize just one particular insight and keep default rendering for  the other insights.

### IDashboardCustomComponentProps.InsightComponentProvider

Specify function to obtain custom component to use for rendering an insight.

**Signature:**

```typescript
InsightComponentProvider?: OptionalInsightComponentProvider;
```

#### Remarks

- If not provided, the default implementation [DefaultDashboardInsight()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardinsight/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardInsight()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardinsight/index.md) will be used.  This is useful if you want to customize just one particular insight and keep default rendering for  the other insights.

### IDashboardCustomComponentProps.InsightMenuButtonComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify function to obtain custom component to use for rendering an insight menu button.

**Signature:**

```typescript
InsightMenuButtonComponentProvider?: OptionalInsightMenuButtonComponentProvider;
```

#### Remarks

- If not provided, the default implementation  will be used. - If factory function is provided and it returns undefined, then the default implementation  will be used.  This is useful if you want to customize just one particular insight and keep default rendering for  the other insights.

### IDashboardCustomComponentProps.InsightMenuComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify function to obtain custom component to use for rendering an insight menu.

**Signature:**

```typescript
InsightMenuComponentProvider?: OptionalInsightMenuComponentProvider;
```

#### Remarks

- If not provided, the default implementation [DefaultDashboardInsightMenu()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardinsightmenu/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardInsightMenu()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardinsightmenu/index.md) will be used.  This is useful if you want to customize just one particular insight and keep default rendering for  the other insights.

### IDashboardCustomComponentProps.LayoutComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the layout.

**Signature:**

```typescript
LayoutComponent?: CustomDashboardLayoutComponent;
```

### IDashboardCustomComponentProps.LoadingComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Component to render while the dashboard or a widget is loading.

**Signature:**

```typescript
LoadingComponent?: ComponentType<ILoadingProps>;
```

#### Remarks

This component is also used in all the individual widgets while they are loading.

### IDashboardCustomComponentProps.MenuButtonComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the menu button.

**Signature:**

```typescript
MenuButtonComponent?: CustomMenuButtonComponent;
```

### IDashboardCustomComponentProps.RestrictedFiltersPlaceholderComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify function to obtain a custom component reporting the filters the current user is not allowed to see.

**Signature:**

```typescript
RestrictedFiltersPlaceholderComponentProvider?: OptionalRestrictedFiltersPlaceholderComponentProvider;
```

#### Remarks

The default notice is used when not provided or when the factory returns undefined. The filters are not passed to the factory: only their number reaches the component.

### IDashboardCustomComponentProps.RestrictedPlaceholderComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify function to obtain a custom component standing in for an insight widget the current user is not allowed to see.

**Signature:**

```typescript
RestrictedPlaceholderComponentProvider?: OptionalRestrictedPlaceholderComponentProvider;
```

#### Remarks

- If not provided, the default access placeholder is used. - If the factory function returns undefined, the default is used for that widget. This is  useful to customize the placeholder for particular widgets only. - The insight is deliberately not passed to the factory: it is the object being withheld.

### IDashboardCustomComponentProps.RichTextComponentProvider

Specify function to obtain custom component to use for rendering a rich text.

**Signature:**

```typescript
RichTextComponentProvider?: OptionalRichTextComponentProvider;
```

#### Remarks

- If not provided, the default implementation [DefaultDashboardRichText](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardrichtext/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardRichText](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardrichtext/index.md).  This is useful if you want to customize just one particular rich text and keep default rendering for  the other rich texts.

### IDashboardCustomComponentProps.RichTextMenuComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify function to obtain custom component to use for rendering an rich text menu.

**Signature:**

```typescript
RichTextMenuComponentProvider?: OptionalRichTextMenuComponentProvider;
```

#### Remarks

- If not provided, the default implementation [DefaultDashboardRichTextMenu()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardrichtextmenu/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardRichTextMenu()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardrichtextmenu/index.md) will be used.  This is useful if you want to customize just one particular insight and keep default rendering for  the other rich texts.

### IDashboardCustomComponentProps.SaveAsDialogComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the save as dialog.

**Signature:**

```typescript
SaveAsDialogComponent?: CustomSaveAsDialogComponent;
```

### IDashboardCustomComponentProps.ScheduledEmailDialogComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the scheduled email dialog.

**Signature:**

```typescript
ScheduledEmailDialogComponent?: CustomScheduledEmailDialogComponent;
```

### IDashboardCustomComponentProps.ScheduledEmailDialogContextDecoratorComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to decorate the data the scheduled email dialog reads.

Rendered between the dialog's data context and its state model; see `CustomScheduledEmailDialogContextDecoratorComponent` for the contract and an example.

**Signature:**

```typescript
ScheduledEmailDialogContextDecoratorComponent?: CustomScheduledEmailDialogContextDecoratorComponent;
```

### IDashboardCustomComponentProps.ScheduledEmailManagementDialogComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the scheduled email management dialog.

**Signature:**

```typescript
ScheduledEmailManagementDialogComponent?: CustomScheduledEmailManagementDialogComponent;
```

### IDashboardCustomComponentProps.ScheduledEmailManagementDialogContextDecoratorComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to decorate the data the scheduled email management dialog reads.

Rendered between the connector-provided management dialog context and the resolved management dialog component; see `CustomScheduledEmailManagementDialogContextDecoratorComponent` for the contract and an example.

**Signature:**

```typescript
ScheduledEmailManagementDialogContextDecoratorComponent?: CustomScheduledEmailManagementDialogContextDecoratorComponent;
```

### IDashboardCustomComponentProps.ShareDialogComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the share dialog.

**Signature:**

```typescript
ShareDialogComponent?: CustomShareDialogComponent;
```

### IDashboardCustomComponentProps.ShowAsTableButtonComponentProvider

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify the component rendered as show as table button.

**Signature:**

```typescript
ShowAsTableButtonComponentProvider?: OptionalShowAsTableButtonComponentProvider;
```

#### Remarks

If not provided, the default implementation  will be used.

### IDashboardCustomComponentProps.SidebarComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the sidebar.

**Signature:**

```typescript
SidebarComponent?: CustomSidebarComponent;
```

### IDashboardCustomComponentProps.TitleComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the title.

**Signature:**

```typescript
TitleComponent?: CustomTitleComponent;
```

#### Remarks

Defaults to [DefaultTitle()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaulttitle/index.md). For an editable title, you can use [EditableTitle()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.editabletitle/index.md) instead. To hide the dashboard title altogether, you can use [HiddenTitle()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.hiddentitle/index.md).

### IDashboardCustomComponentProps.TopBarComponent

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Specify component to use for rendering the top bar.

**Signature:**

```typescript
TopBarComponent?: CustomTopBarComponent;
```

#### Remarks

Note that if you override this component, the ButtonBarComponent, MenuButtonComponent and TitleComponent props might get ignored depending on your implementation.

### IDashboardCustomComponentProps.VisualizationSwitcherComponentProvider

Specify function to obtain custom component to use for rendering a visualization switcher.

**Signature:**

```typescript
VisualizationSwitcherComponentProvider?: OptionalVisualizationSwitcherComponentProvider;
```

#### Remarks

- If not provided, the default implementation [DefaultDashboardVisualizationSwitcher](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardvisualizationswitcher/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultDashboardVisualizationSwitcher](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardvisualizationswitcher/index.md).  This is useful if you want to customize just one particular visualization switcher and keep default rendering for  the other visualization switchers.

### IDashboardCustomComponentProps.VisualizationSwitcherToolbarComponentProvider

Specify function to obtain custom component to use for rendering a visualization switcher toolbar.

**Signature:**

```typescript
VisualizationSwitcherToolbarComponentProvider?: OptionalVisualizationSwitcherToolbarComponentProvider;
```

#### Remarks

- If not provided, the default implementation [DefaultVisualizationSwitcherToolbar()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultvisualizationswitchertoolbar/index.md) will be used. - If factory function is provided and it returns undefined, then the default implementation [DefaultVisualizationSwitcherToolbar()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultvisualizationswitchertoolbar/index.md).  This is useful if you want to customize just one particular visualization switcher toolbar and keep default rendering for  the other visualization switchers.

### IDashboardCustomComponentProps.WidgetComponentProvider

Specify function to obtain custom component to use for rendering a widget.

**Signature:**

```typescript
WidgetComponentProvider?: OptionalWidgetComponentProvider;
```

#### Remarks

- If not provided, the default implementation  will be used. - If factory function is provided and it returns undefined, then the default implementation .  This is useful if you want to customize just one particular widget and keep default rendering for the  other widgets.

#### Example

```tsx
// Simple component that alters the title of every widget
const CustomWidget = (props) => {
    const widget: IInsightWidget = {
        ...props.widget,
        title: `Prepend to ${props.widget.title}`,
    };

    return <DefaultDashboardWidget {...props} widget={widget} />;
};
```