{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/develop/configuration/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Configuration","navTitle":null,"slug":"develop/configuration/","hidePage":false,"collapsibleGroup":"","group":"","seoDescription":"The Configuration component is used to provide a variety of useful overrides to your application.","cosmosComponent":{"component":{"component":"Configuration","package":"core"}},"childStrapiDeveloperComponentPageOverviewTextnode":{"overview":"_Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Community](https://docs.pega.com/user-experience/87/theme-cosmos)._\n\nThe Configuration component is used to provide a variety of useful overrides to your application. You can use the Configuration component to wrap you entire application, or you can wrap individual components for specific use cases. The props passed to the Configuration component that are detailed below may also be passed in as a Configuration object to the **context** prop.\n\nThis documentation only covers a subset of the available props for the Configuration component."},"body":[{"id":"3014b158-5635-580d-b833-f408e7ebf739","strapi_component":"layout.section","title":"Locale","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **locale** prop accepts any valid [BCP-47](https://www.techonthenet.com/js/language_tags.php) language tag. This will control how certain components such as [DateTimeInput](/versions/8/develop/date-time-input) render information that may be locale sensitive."}},{"id":"647d6a17-367c-557f-a672-7ce586989892","strapi_component":"demo.code-editor","demo":{"demoName":"ConfigurableLocale","component":"Configuration","package":"core"}},{"id":"d91df664-d593-5a33-9a27-e11cf87de122","strapi_component":"layout.section","title":"Direction","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **direction** prop determines the flow of elements on the screen. This can also be determined by the **locale** prop."}},{"id":"223f7c30-8cbd-5dbc-81e7-6e13290b50d7","strapi_component":"layout.section","title":"Portal target","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **portalTarget** prop determines where to render certain components within the DOM tree. This will only affect components that are designed to render within a [React Portal](https://reactjs.org/docs/portals.html), such as [Modals](/versions/8/develop/modal), [Popovers](/versions/8/develop/popover), and [Toasts](/versions/8/develop/toast).\n\nBy default, the **portalTarget** is set to `body`, so those components will appear as direct siblings to the `<body/>` tag when they are present in the DOM. You can supply any present DOM element to this prop and then components that renders within a [React Portal](https://reactjs.org/docs/portals.html) will become a direct sibling to the specified element."}},{"id":"809febe1-bfc7-516d-a637-c1517238664e","strapi_component":"layout.section","title":"Style sheet target","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **styleSheetTarget** prop is similar to the **portalTarget** prop in that it accepts a DOM element. However, this target is utilized by the [Styled Components](https://styled-components.com) library. This target is referenced by the [StyleSheetManager](https://styled-components.com/docs/api#stylesheetmanager) and any component styles will originate from the provided target.\n\nBy default, this target is set to `html` and thus covers the entirety of the DOM."}},{"id":"5c2184b7-6f48-5117-8b20-e906adea1cc2","strapi_component":"layout.section","title":"Theme","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **theme** prop accepts any JSON file or object that represents a subset of the Constellation [Theme](/versions/8/develop/theme). Every attribute within the [Theme](/versions/8/develop/theme) can be modified by replicating that attribute's hierarchy and providing a custom value."}},{"id":"09bddf36-c3f9-57a9-8382-701968c0f19f","strapi_component":"demo.code-editor","demo":{"demoName":"ConfigurableBaseTheme","component":"Configuration","package":"core"}},{"id":"07f95468-261f-54c5-89ab-256d77d91885","strapi_component":"layout.section","title":"Translations","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **translations** prop accepts a JSON object of key-value pairs. This object can contain new keys as well as override the values of existing keys."}},{"id":"1a04445d-a717-587a-9751-8f80bb8f99fb","strapi_component":"demo.code-editor","demo":{"demoName":"ConfigurableTranslations","component":"Configuration","package":"core"}}],"relatedComponents":[],"propsTable":true,"themeTree":null}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"Configuration","navTitle":null,"slug":"develop/configuration/","hidePage":false,"collapsibleGroup":"","group":"","seoDescription":"The Configuration component is used to provide a variety of useful overrides to your application.","cosmosComponent":{"component":{"component":"Configuration","package":"core"}},"childStrapiDeveloperComponentPageOverviewTextnode":{"overview":"_Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Community](https://docs.pega.com/user-experience/87/theme-cosmos)._\n\nThe Configuration component is used to provide a variety of useful overrides to your application. You can use the Configuration component to wrap you entire application, or you can wrap individual components for specific use cases. The props passed to the Configuration component that are detailed below may also be passed in as a Configuration object to the **context** prop.\n\nThis documentation only covers a subset of the available props for the Configuration component."},"body":[{"id":"3014b158-5635-580d-b833-f408e7ebf739","strapi_component":"layout.section","title":"Locale","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **locale** prop accepts any valid [BCP-47](https://www.techonthenet.com/js/language_tags.php) language tag. This will control how certain components such as [DateTimeInput](/versions/8/develop/date-time-input) render information that may be locale sensitive."}},{"id":"647d6a17-367c-557f-a672-7ce586989892","strapi_component":"demo.code-editor","demo":{"demoName":"ConfigurableLocale","component":"Configuration","package":"core"}},{"id":"d91df664-d593-5a33-9a27-e11cf87de122","strapi_component":"layout.section","title":"Direction","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **direction** prop determines the flow of elements on the screen. This can also be determined by the **locale** prop."}},{"id":"223f7c30-8cbd-5dbc-81e7-6e13290b50d7","strapi_component":"layout.section","title":"Portal target","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **portalTarget** prop determines where to render certain components within the DOM tree. This will only affect components that are designed to render within a [React Portal](https://reactjs.org/docs/portals.html), such as [Modals](/versions/8/develop/modal), [Popovers](/versions/8/develop/popover), and [Toasts](/versions/8/develop/toast).\n\nBy default, the **portalTarget** is set to `body`, so those components will appear as direct siblings to the `<body/>` tag when they are present in the DOM. You can supply any present DOM element to this prop and then components that renders within a [React Portal](https://reactjs.org/docs/portals.html) will become a direct sibling to the specified element."}},{"id":"809febe1-bfc7-516d-a637-c1517238664e","strapi_component":"layout.section","title":"Style sheet target","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **styleSheetTarget** prop is similar to the **portalTarget** prop in that it accepts a DOM element. However, this target is utilized by the [Styled Components](https://styled-components.com) library. This target is referenced by the [StyleSheetManager](https://styled-components.com/docs/api#stylesheetmanager) and any component styles will originate from the provided target.\n\nBy default, this target is set to `html` and thus covers the entirety of the DOM."}},{"id":"5c2184b7-6f48-5117-8b20-e906adea1cc2","strapi_component":"layout.section","title":"Theme","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **theme** prop accepts any JSON file or object that represents a subset of the Constellation [Theme](/versions/8/develop/theme). Every attribute within the [Theme](/versions/8/develop/theme) can be modified by replicating that attribute's hierarchy and providing a custom value."}},{"id":"09bddf36-c3f9-57a9-8382-701968c0f19f","strapi_component":"demo.code-editor","demo":{"demoName":"ConfigurableBaseTheme","component":"Configuration","package":"core"}},{"id":"07f95468-261f-54c5-89ab-256d77d91885","strapi_component":"layout.section","title":"Translations","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The **translations** prop accepts a JSON object of key-value pairs. This object can contain new keys as well as override the values of existing keys."}},{"id":"1a04445d-a717-587a-9751-8f80bb8f99fb","strapi_component":"demo.code-editor","demo":{"demoName":"ConfigurableTranslations","component":"Configuration","package":"core"}}],"relatedComponents":[],"propsTable":true,"themeTree":null}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}