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.

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.

Disabled Buttons

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

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.

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

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.

Properties

Name	Type	Default	Description
`children*`	`ReactNode`		Text or content for the Button.
`aria-label`	`string`		The aria label text will be inserted as the aria-label on the Button.
`as`	`ElementType`		HTML tag or React Component to render the component as.
`className`	`string`		Additional CSS classes.
`compact`	`boolean`	`false`	Used for a smaller sized button.
`disabled`	`boolean`	`false`	Determines if the Button will be disabled.
`forwardedAs`	`ElementType`		HTML tag or React Component to finally render the component as.
`href`	`string`		A location to navigate to. Passing an href will render an anchor styled as a Button.
`icon`	`boolean`	`false`	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`.
`label`	`string`		The label text will be used inside a Tooltip.
`loading`	`boolean`	`false`	Optionally renders an indeterminate progress indicator in a button.
`ref`	`Ref<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.

Custom theming

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

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