{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/develop/button/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Button","navTitle":null,"slug":"develop/button/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"Buttons execute an action when users interact with them.","cosmosComponent":{"component":{"component":"Button","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\nButtons execute any action when a user interacts with them, including submitting [Forms](/versions/8/develop/form). Unlike [Links](/versions/8/develop/link), they do not perform navigation."},"body":[{"id":"0974c58c-8f2e-5da0-9285-fcfee1799145","strapi_component":"layout.section","title":"Variants","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Button component offers multiple **variants** that alter the physical appearance and interactions of the Button. For each **variant**, the Button style can be further modified by setting it as **compact**.\n\nAny Button with a **label** provided will render a [Tooltip](/versions/8/develop/tooltip) upon hover or focus of the Button. The [Tooltip](/versions/8/develop/tooltip) will contain the **label** provided, as will the **aria-label** attribute, unless explicitly set otherwise."}},{"id":"6f1de497-17ed-5d95-82cc-88aa2f6ad76e","strapi_component":"demo.code-editor","demo":{"demoName":"ButtonVariants","component":"Button","package":"core"}},{"id":"06b51f94-fbc1-5cc9-9245-d605fd77ff94","strapi_component":"layout.section","title":"Disabled Buttons","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"When Buttons are disabled, they become opaque and non-interactable."}},{"id":"c2621e8f-0884-5d13-8172-215d0b49dac1","strapi_component":"demo.code-editor","demo":{"demoName":"DisabledButtons","component":"Button","package":"core"}},{"id":"6876a665-3dd8-59a9-a843-833ff4147599","strapi_component":"layout.section","title":"Icon Buttons","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"If a Button's only content is an [Icon](/versions/8/develop/icon), you should set the **icon** prop to true so that the Button is sized appropriately. You should also make sure to include a **label** for icon-only Buttons for accessibility reasons."}},{"id":"9ee8fcae-e818-5f50-b981-f22e00ddf665","strapi_component":"demo.code-editor","demo":{"demoName":"IconButtons","component":"Button","package":"core"}},{"id":"eae3a0b6-763f-5f63-8a6a-3847058048a6","strapi_component":"layout.section","title":"Loading Buttons","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"If the **loading** prop is set _true_ on a Button, a small spinning [Progress](/versions/8/develop/progress) ring will appear. The loading animation will replace whatever content was passed to the Button children without altering the original size of the Button. The loading animation should only be applied to Buttons with **variants** of either _primary_ or _secondary_."}},{"id":"b5535529-d1ea-5f95-a2ab-269254942591","strapi_component":"demo.code-editor","demo":{"demoName":"LoadingButtons","component":"Button","package":"core"}},{"id":"65e6499d-f6a2-5b74-a4ef-11891c87a1d0","strapi_component":"layout.section","title":"Link Buttons","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"If you need a native `<a/>` in your DOM, but would like the styling of a Button, you can simply pass an **href** to the Button of choice. Keep in mind, if you pass an **href** to a Button with a _link_ **variant**, you should just use the [Link](/versions/8/develop/link) component instead."}},{"id":"245a8f1d-f28d-56ae-9927-2a7c7cbd38b0","strapi_component":"demo.code-editor","demo":{"demoName":"ButtonAsLink","component":"Button","package":"core"}}],"relatedComponents":[{"displayText":"Icon","link":"/versions/8/develop/icon"},{"displayText":"Link","link":"/versions/8/develop/link"},{"displayText":"Progress","link":"/versions/8/develop/progress"}],"propsTable":true,"themeTree":{"editable":false,"component":true,"target":"button"}}},"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":"Button","navTitle":null,"slug":"develop/button/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"Buttons execute an action when users interact with them.","cosmosComponent":{"component":{"component":"Button","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\nButtons execute any action when a user interacts with them, including submitting [Forms](/versions/8/develop/form). Unlike [Links](/versions/8/develop/link), they do not perform navigation."},"body":[{"id":"0974c58c-8f2e-5da0-9285-fcfee1799145","strapi_component":"layout.section","title":"Variants","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Button component offers multiple **variants** that alter the physical appearance and interactions of the Button. For each **variant**, the Button style can be further modified by setting it as **compact**.\n\nAny Button with a **label** provided will render a [Tooltip](/versions/8/develop/tooltip) upon hover or focus of the Button. The [Tooltip](/versions/8/develop/tooltip) will contain the **label** provided, as will the **aria-label** attribute, unless explicitly set otherwise."}},{"id":"6f1de497-17ed-5d95-82cc-88aa2f6ad76e","strapi_component":"demo.code-editor","demo":{"demoName":"ButtonVariants","component":"Button","package":"core"}},{"id":"06b51f94-fbc1-5cc9-9245-d605fd77ff94","strapi_component":"layout.section","title":"Disabled Buttons","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"When Buttons are disabled, they become opaque and non-interactable."}},{"id":"c2621e8f-0884-5d13-8172-215d0b49dac1","strapi_component":"demo.code-editor","demo":{"demoName":"DisabledButtons","component":"Button","package":"core"}},{"id":"6876a665-3dd8-59a9-a843-833ff4147599","strapi_component":"layout.section","title":"Icon Buttons","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"If a Button's only content is an [Icon](/versions/8/develop/icon), you should set the **icon** prop to true so that the Button is sized appropriately. You should also make sure to include a **label** for icon-only Buttons for accessibility reasons."}},{"id":"9ee8fcae-e818-5f50-b981-f22e00ddf665","strapi_component":"demo.code-editor","demo":{"demoName":"IconButtons","component":"Button","package":"core"}},{"id":"eae3a0b6-763f-5f63-8a6a-3847058048a6","strapi_component":"layout.section","title":"Loading Buttons","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"If the **loading** prop is set _true_ on a Button, a small spinning [Progress](/versions/8/develop/progress) ring will appear. The loading animation will replace whatever content was passed to the Button children without altering the original size of the Button. The loading animation should only be applied to Buttons with **variants** of either _primary_ or _secondary_."}},{"id":"b5535529-d1ea-5f95-a2ab-269254942591","strapi_component":"demo.code-editor","demo":{"demoName":"LoadingButtons","component":"Button","package":"core"}},{"id":"65e6499d-f6a2-5b74-a4ef-11891c87a1d0","strapi_component":"layout.section","title":"Link Buttons","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"If you need a native `<a/>` in your DOM, but would like the styling of a Button, you can simply pass an **href** to the Button of choice. Keep in mind, if you pass an **href** to a Button with a _link_ **variant**, you should just use the [Link](/versions/8/develop/link) component instead."}},{"id":"245a8f1d-f28d-56ae-9927-2a7c7cbd38b0","strapi_component":"demo.code-editor","demo":{"demoName":"ButtonAsLink","component":"Button","package":"core"}}],"relatedComponents":[{"displayText":"Icon","link":"/versions/8/develop/icon"},{"displayText":"Link","link":"/versions/8/develop/link"},{"displayText":"Progress","link":"/versions/8/develop/progress"}],"propsTable":true,"themeTree":{"editable":false,"component":true,"target":"button"}}},"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"]}