@itwin/itwinui-react/esm/core/Buttons/Button.js

A react component library for iTwinUI

import cx from 'classnames';
import * as React from 'react';
import { Box, ButtonBase } from '../../utils/index.js';
import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
import { PopoverOpenContext } from '../Popover/Popover.js';
export const Button = React.forwardRef((props, ref) => {
  let {
    children,
    className,
    size,
    styleType = 'default',
    startIcon,
    endIcon,
    labelProps,
    startIconProps,
    endIconProps,
    stretched,
    loading: loading,
    disabled: disabledProp,
    ...rest
  } = props;
  let hasPopoverOpen = React.useContext(PopoverOpenContext);
  return React.createElement(
    ButtonBase,
    {
      ref: ref,
      className: cx('iui-button', 'iui-field', className),
      'data-iui-variant': 'default' !== styleType ? styleType : void 0,
      'data-iui-size': size,
      'data-iui-loading': loading ? 'true' : void 0,
      'data-iui-has-popover': hasPopoverOpen ? 'open' : void 0,
      disabled: disabledProp || loading,
      ...rest,
      style: {
        '--_iui-width': stretched ? '100%' : void 0,
        ...props.style,
      },
    },
    startIcon &&
      React.createElement(
        Box,
        {
          as: 'span',
          'aria-hidden': true,
          ...startIconProps,
          className: cx('iui-button-icon', startIconProps?.className),
        },
        startIcon,
      ),
    children &&
      React.createElement(
        Box,
        {
          as: 'span',
          ...labelProps,
          className: cx('iui-button-label', labelProps?.className),
        },
        children,
      ),
    endIcon &&
      React.createElement(
        Box,
        {
          as: 'span',
          'aria-hidden': true,
          ...endIconProps,
          className: cx('iui-button-icon', endIconProps?.className),
        },
        endIcon,
      ),
    loading &&
      React.createElement(ProgressRadial, {
        size: 'small' === size ? 'x-small' : 'small',
        className: 'iui-button-spinner',
        'aria-hidden': true,
      }),
  );
});
if ('development' === process.env.NODE_ENV) Button.displayName = 'Button';