Button

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

Buttons execute any action when a user interacts with them, including submitting Forms. Unlike Links, they do not perform navigation.

Variants

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.

Any Button with a label provided will render a Tooltip upon hover or focus of the Button. The Tooltip will contain the label provided, as will the aria-label attribute, unless explicitly set otherwise.

Example

Disabled Buttons

When Buttons are disabled, they become opaque and non-interactable.

Example

Icon Buttons

If a Button's only content is an 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.

Example

Loading Buttons

If the loading prop is set true on a Button, a small spinning 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.

Example

Link Buttons

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 component instead.

Example

Go to pega.com

Related components

Properties

NameDescriptionDefaultType
children*Text or content for the Button.ReactNode
aria-labelThe aria label text will be inserted as the aria-label on the Button.string
asHTML tag or React Component to render the component as.ElementType<any>
classNameAdditional CSS classes.string
compactUsed for a smaller sized button.falseboolean
disabledDetermines if the Button will be disabled.falseboolean
forwardedAsHTML tag or React Component to finally render the component as.ElementType<any>
hrefA location to navigate to. Passing an href will render an anchor styled as a Button.string
iconSet the Icon prop to falseboolean
labelThe label text will be used inside a Tooltip.string
loadingOptionally renders an indeterminate progress indicator in a button.falseboolean
refRef forwarded to the wrapping element.Ref<HTMLButtonElement>
typeControls the behavior of a Button within a Form."button"
'button' |'reset' |'submit' 
variantControls the styling of the Button."secondary"
'link' |'text' |'primary' |'secondary' |'simple' 

Custom theming

You can override the styles of the Button component by setting a custom theme on the Configuration component.

Example

Theme properties

{
      •       height: 'base.hit-area.mouse-min', // → base.hit-area.mouse-min
      •       'border-width': '0.0625rem',
      •       'border-radius': 9999,
      •       color: 'base.palette.interactive', // → base.palette.interactive
      •       'secondary-color': 'base.palette.primary-background', // → base.palette.primary-background
      •       'focus-shadow': 'base.shadow.focus', // → base.shadow.focus
      •       padding: '0 1rem',
        •         height: 'base.hit-area.finger-min', // → base.hit-area.finger-min
        •         padding: '0 1.5rem'
        •       }
      •     }
    •   }
}