Button

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

For more information on how to use the features and props for this component, check out the developer documentation.

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.

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

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.

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 will only be applied to Buttons with variants of either primary, secondary, or simple.

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.

NameTypeDefaultDescription
children*ReactNodeText or content for the Button.
aria-labelstringThe aria label text will be inserted as the aria-label on the Button.
asElementTypeHTML tag or React Component to render the component as.
classNamestringAdditional CSS classes.
compactbooleanfalse Used for a smaller sized button.
disabledbooleanfalse Determines if the Button will be disabled.
forwardedAsElementTypeHTML tag or React Component to finally render the component as.
hrefstringA location to navigate to. Passing an href will render an anchor styled as a Button.
iconbooleanfalse Set the Icon prop to true if you're using just an Icon in your Button. Make sure to pass an Icon as children if true.
labelstringThe label text will be used inside a Tooltip.
loadingbooleanfalse Optionally renders an indeterminate progress indicator in a button.
refRef<HTMLButtonElement>Ref forwarded to the wrapping element.
type
'button' |'reset' |'submit' 
"button" Controls the behavior of a Button within a Form.
variant
'primary' |'secondary' |'simple' |'link' |'text' 
"secondary" Controls the styling of the Button.

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

{
      •       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'
        •       }
      •     }
    •   }
}