@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
97 lines • 2.76 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import ButtonBase from '../shared/button-base';
import Content from '../shared/content';
import IconRenderer from '../shared/icon-renderer';
/**
* __Button__
*
* A button triggers an event or action.
*
* - [Examples](https://atlassian.design/components/button/examples)
* - [Code](https://atlassian.design/components/button/code)
* - [Usage](https://atlassian.design/components/button/usage)
*/
const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
analyticsContext,
appearance,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
autoFocus,
children,
iconAfter,
iconBefore,
interactionName,
isDisabled,
isLoading = false,
isSelected,
onClick,
onClickCapture,
onKeyDownCapture,
onKeyUpCapture,
onMouseDownCapture,
onMouseUpCapture,
onPointerDownCapture,
onPointerUpCapture,
onTouchEndCapture,
onTouchStartCapture,
shouldFitContainer,
spacing,
testId,
type = 'button',
...unsafeRest
}, ref) {
// @ts-expect-error
const {
className: _className,
css: _css,
as: _as,
style: _style,
...saferRest
} = unsafeRest;
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
analyticsContext: analyticsContext,
ref: ref,
appearance: appearance,
autoFocus: autoFocus,
isDisabled: isDisabled,
isLoading: isLoading,
isSelected: isSelected,
hasIconBefore: Boolean(iconBefore),
hasIconAfter: Boolean(iconAfter),
shouldFitContainer: shouldFitContainer,
spacing: spacing,
ariaLabel: ariaLabel,
ariaLabelledBy: ariaLabelledBy,
onClick: onClick,
onClickCapture: onClickCapture,
onKeyDownCapture: onKeyDownCapture,
onKeyUpCapture: onKeyUpCapture,
onMouseDownCapture: onMouseDownCapture,
onMouseUpCapture: onMouseUpCapture,
onPointerDownCapture: onPointerDownCapture,
onPointerUpCapture: onPointerUpCapture,
onTouchStartCapture: onTouchStartCapture,
onTouchEndCapture: onTouchEndCapture,
testId: testId,
componentName: "Button",
type: type,
interactionName: interactionName
}, saferRest), iconBefore && /*#__PURE__*/React.createElement(Content, {
type: "icon",
position: "before",
isLoading: isLoading
}, /*#__PURE__*/React.createElement(IconRenderer, {
icon: iconBefore
})), children && /*#__PURE__*/React.createElement(Content, {
isLoading: isLoading
}, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
type: "icon",
position: "after",
isLoading: isLoading
}, /*#__PURE__*/React.createElement(IconRenderer, {
icon: iconAfter
})));
}));
Button.displayName = 'Button';
export default Button;