@widergy/energy-ui 3.161.0 → 3.162.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.162.0](https://github.com/widergy/energy-ui/compare/v3.161.0...v3.162.0) (2026-06-05)
+
+
+### Features
+
+* [DIS-1105] upgrade utbanner ([#806](https://github.com/widergy/energy-ui/issues/806)) ([64c509b](https://github.com/widergy/energy-ui/commit/64c509b93faf3bddc0ce1909727f4eac28b27b59))
+
 # [3.161.0](https://github.com/widergy/energy-ui/compare/v3.160.1...v3.161.0) (2026-06-05)
 
 

package/dist/components/UTBanner/README.md

@@ -2,14 +2,47 @@
 
 ### Description
 
-This component displays a banner with information
+Displays a banner with contextual information. Supports multiple color themes, sizes, icon/button placement, and optional close action.
 
 ## Props
 
-| Name       | Type             | Default | Description                                                                 |
-| ---------- | ---------------- | ------- | --------------------------------------------------------------------------- |
-| children   | element          |         | The contents that will be rendered inside the component.                    |
-| classes    | object of string |         | Classes returned by UTBanner's own [theme](./theme.js#L40) `retrieveStyle`. |
-| classNames | object of string |         | Additional classes.                                                         |
-| Icon       | element          |         | Icon to be displayed at the left side of the banner.                        |
-| iconProps  | object           |         | Props to be passed onto the rendered icon.                                  |
+| Name              | Type                                                                              | Default        | Description                                                                 |
+| ----------------- | --------------------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------- |
+| button            | object (UTButton props)                                                           |                | Primary action button. All UTButton props are accepted.                      |
+| buttonPlacement   | `'horizontal'` \| `'vertical'`                                                    | `'horizontal'` | Alignment between the text group and the buttons group.                      |
+| category          | string                                                                            |                | Optional category label shown above the main text (xsmall, uppercase, gray). |
+| children          | node                                                                              |                | Main text content rendered inside the banner.                                |
+| classes           | object of string                                                                  |                | Classes returned by UTBanner's own [theme](./theme.js) `retrieveStyle`.     |
+| classNames        | object of string                                                                  |                | Additional classes merged with the themed classes.                           |
+| colorTheme        | `'error'` \| `'gray'` \| `'information'` \| `'negative'` \| `'primary'` \| `'success'` \| `'warning'` \| `'white'` | `'gray'` | Color theme that determines the banner background.          |
+| helpText          | string                                                                            |                | Optional secondary text shown below the main content (small, gray).          |
+| Icon              | element type                                                                      |                | Icon component rendered at the start of the banner.                          |
+| iconPlacement     | `'horizontal'` \| `'vertical'`                                                    | `'horizontal'` | Alignment between the icon and the text group.                               |
+| iconProps         | object                                                                            |                | Props passed to the `Icon` component.                                        |
+| onClose           | func                                                                              |                | If provided, renders a close button (gray, small, IconX) at the end.         |
+| secondaryButton   | object (UTButton props)                                                           |                | Secondary action button. Renders as `variant="text"` by default.             |
+| size              | `'small'` \| `'medium'` \| `'large'`                                              | `'medium'`     | Controls padding, gap, and icon size.                                        |
+| variant           | `'light'` \| `'dark'`                                                             | `'light'`      | Light or dark tint of the color theme.                                       |
+
+## Usage examples
+
+```jsx
+// Basic
+<UTBanner>Your account has been updated.</UTBanner>
+
+// With color theme and close
+<UTBanner colorTheme="success" onClose={() => dismiss()}>
+  Your changes were saved successfully.
+</UTBanner>
+
+// With category, helpText and actions
+<UTBanner
+  category="Alert"
+  colorTheme="warning"
+  helpText="Contact support if the issue persists."
+  button={{ children: 'Retry', onClick: handleRetry }}
+  secondaryButton={{ children: 'Dismiss', onClick: handleDismiss }}
+>
+  Something went wrong while loading your data.
+</UTBanner>
+```

package/dist/components/UTBanner/constants.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANTS = exports.SIZES = exports.PLACEMENTS = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
+const SIZES = exports.SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+const COLOR_THEMES = exports.COLOR_THEMES = {
+  ERROR: 'error',
+  GRAY: 'gray',
+  INFORMATION: 'information',
+  NEGATIVE: 'negative',
+  PRIMARY: 'primary',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  WHITE: 'white'
+};
+const VARIANTS = exports.VARIANTS = {
+  DARK: 'dark',
+  LIGHT: 'light'
+};
+const PLACEMENTS = exports.PLACEMENTS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  buttonPlacement: PLACEMENTS.HORIZONTAL,
+  colorTheme: COLOR_THEMES.GRAY,
+  iconPlacement: PLACEMENTS.HORIZONTAL,
+  size: SIZES.MEDIUM,
+  variant: VARIANTS.LIGHT
+};

package/dist/components/UTBanner/index.js

@@ -4,34 +4,137 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _componentUtils = require("../../utils/componentUtils");
 var _classesUtils = require("../../utils/classesUtils");
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _testIds = require("../../constants/testIds");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-var _theme = require("./theme");
+var _types = require("./types");
+var _utils = require("./utils");
+var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const UTBanner = _ref => {
   let {
-    classes: themeClasses = {},
+    button,
+    buttonPlacement = _constants.DEFAULT_PROPS.buttonPlacement,
+    category,
     classNames,
-    children,
+    colorTheme = _constants.DEFAULT_PROPS.colorTheme,
+    dataTestId,
+    description,
+    helpText,
+    Icon,
+    iconPlacement = _constants.DEFAULT_PROPS.iconPlacement,
     iconProps,
-    Icon
+    onClose,
+    secondaryButton,
+    size = _constants.DEFAULT_PROPS.size,
+    title,
+    variant = _constants.DEFAULT_PROPS.variant
   } = _ref;
-  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const isVerticalButton = buttonPlacement === _constants.PLACEMENTS.VERTICAL;
+  const isVerticalIcon = iconPlacement === _constants.PLACEMENTS.VERTICAL;
+  const labelColorTheme = (0, _utils.getLabelColorTheme)(colorTheme, variant);
+  const secondaryLabelColorTheme = (0, _utils.getSecondaryLabelColorTheme)(colorTheme, variant);
+  const {
+    titleVariant,
+    descriptionVariant
+  } = (0, _utils.getLabelStyles)(size);
+  const iconTheme = (0, _utils.getDefaultIconTheme)(colorTheme, variant);
+  const iconSize = (0, _utils.getDefaultIconSize)(size);
+  const buttonColorTheme = (0, _utils.getDefaultButtonColorTheme)(variant);
+  const gapClass = _stylesModule.default["gap".concat((0, _componentUtils.capitalize)(size))];
+  const paddingClass = _stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))];
+  const colorClass = _stylesModule.default["".concat(colorTheme).concat((0, _componentUtils.capitalize)(variant))];
+  const dynamicClasses = {
+    bannerContainer: [colorClass, paddingClass, gapClass].filter(Boolean).join(' '),
+    contentContainer: [isVerticalButton ? _stylesModule.default.contentVertical : _stylesModule.default.contentHorizontal, gapClass].filter(Boolean).join(' '),
+    iconTextContainer: [isVerticalIcon ? _stylesModule.default.iconVertical : _stylesModule.default.iconHorizontal, !isVerticalButton ? _stylesModule.default.iconFlex : ''].filter(Boolean).join(' '),
+    textContainer: !isVerticalIcon ? _stylesModule.default.textFlex : '',
+    buttonsContainer: isVerticalButton ? _stylesModule.default.buttonsVertical : ''
+  };
+  const normalizedClassNames = classNames ? {
+    ...classNames,
+    bannerContainer: classNames.infoContainer
+  } : undefined;
+  const classes = (0, _classesUtils.mergeMultipleClassNames)(_stylesModule.default, dynamicClasses, normalizedClassNames);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.bannerContainer, " ").concat(classes.infoContainer)
-  }, Icon && /*#__PURE__*/_react.default.createElement(Icon, iconProps), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.bannerContainer,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.contentContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.iconTextContainer
+  }, !!Icon && (0, _componentUtils.isUTIcon)(Icon) ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    colorTheme: iconTheme.colorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.ICON) : undefined,
+    name: Icon,
+    shade: iconTheme.shade,
+    size: iconSize
+  }, iconProps)) : !!Icon && /*#__PURE__*/_react.default.createElement(Icon, _extends({}, iconProps, {
+    "data-testId": dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.ICON) : undefined
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.textContainer
+  }, !!category && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.uppercase,
+    colorTheme: secondaryLabelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".category.").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
+    variant: "xsmall",
+    weight: "medium"
+  }, category), !!title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: labelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.TITLE, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
+    variant: titleVariant,
+    weight: "medium"
+  }, title), !!description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: labelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.DESCRIPTION, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
+    variant: descriptionVariant
+  }, description), !!helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: secondaryLabelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.HELP_TEXT, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
     variant: "small"
-  }, children));
+  }, helpText))), !!(button || secondaryButton) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.buttonsContainer
+  }, !!button && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    colorTheme: buttonColorTheme.button
+  }, button, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".button.").concat(_testIds.ID_CONSTANTS.SECONDARY_ACTION) : undefined
+  }), button.title), !!secondaryButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    colorTheme: buttonColorTheme.secondaryButton,
+    variant: "text"
+  }, secondaryButton, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".secondaryButton.").concat(_testIds.ID_CONSTANTS.TERTIARY_ACTION) : undefined
+  }), secondaryButton.title))), !!onClose && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: buttonColorTheme.onClose,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".close") : undefined,
+    Icon: "IconX",
+    onClick: onClose,
+    size: "small",
+    variant: "text"
+  }));
 };
 UTBanner.propTypes = {
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  button: _types.buttonType,
+  buttonPlacement: (0, _propTypes.oneOf)(Object.values(_constants.PLACEMENTS)),
+  category: _propTypes.string,
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  Icon: _propTypes.object,
-  iconProps: _propTypes.object
+  colorTheme: (0, _propTypes.oneOf)(Object.values(_constants.COLOR_THEMES)),
+  dataTestId: _propTypes.string,
+  description: _propTypes.string,
+  helpText: _propTypes.string,
+  Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
+  iconPlacement: (0, _propTypes.oneOf)(Object.values(_constants.PLACEMENTS)),
+  iconProps: _propTypes.object,
+  onClose: _propTypes.func,
+  secondaryButton: _types.buttonType,
+  size: (0, _propTypes.oneOf)(Object.values(_constants.SIZES)),
+  title: _propTypes.string,
+  variant: (0, _propTypes.oneOf)(Object.values(_constants.VARIANTS))
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTBanner);
+var _default = exports.default = UTBanner;

package/dist/components/UTBanner/stories/UTBanner.stories.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithDescription = exports.WithClose = exports.WithCategoryAndHelpText = exports.WithActions = exports.VerticalLayout = exports.Playground = exports.DarkVariant = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _constants = require("../constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable no-alert */
+var _default = exports.default = {
+  args: {
+    buttonPlacement: _constants.PLACEMENTS.HORIZONTAL,
+    colorTheme: _constants.COLOR_THEMES.GRAY,
+    iconPlacement: _constants.PLACEMENTS.HORIZONTAL,
+    size: _constants.SIZES.MEDIUM,
+    title: 'Your account information has been updated successfully.',
+    variant: _constants.VARIANTS.LIGHT
+  },
+  argTypes: {
+    button: {
+      control: 'object',
+      description: 'Primary action button. Accepts all UTButton props.',
+      table: {
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    buttonPlacement: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(_constants.PLACEMENTS)
+    },
+    category: {
+      control: 'text',
+      description: 'Optional category label shown above the title (xsmall, uppercase, gray).'
+    },
+    colorTheme: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(_constants.COLOR_THEMES)
+    },
+    description: {
+      control: 'text',
+      description: 'Optional body text shown below the title (small).'
+    },
+    helpText: {
+      control: 'text',
+      description: 'Optional secondary text shown below the description (small, gray).'
+    },
+    iconPlacement: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(_constants.PLACEMENTS)
+    },
+    Icon: {
+      control: 'text',
+      description: 'Nombre del ícono (string) o componente React. Ej: "IconAlertCircle".'
+    },
+    iconProps: {
+      control: false
+    },
+    onClose: {
+      control: false
+    },
+    secondaryButton: {
+      control: 'object',
+      description: 'Secondary action button. Renders as variant="text" by default.'
+    },
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(_constants.SIZES)
+    },
+    title: {
+      control: 'text',
+      description: 'Main text of the banner.'
+    },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(_constants.VARIANTS)
+    }
+  },
+  component: _.default,
+  title: 'Energy-UI/UTBanner'
+};
+const Playground = exports.Playground = {};
+const WithClose = exports.WithClose = {
+  args: {
+    colorTheme: _constants.COLOR_THEMES.WARNING,
+    onClose: () => alert('closed'),
+    title: 'Session will expire in 5 minutes.'
+  },
+  name: 'With Close Button'
+};
+const WithActions = exports.WithActions = {
+  args: {
+    button: {
+      title: 'Retry',
+      onClick: () => alert('retry')
+    },
+    colorTheme: _constants.COLOR_THEMES.ERROR,
+    secondaryButton: {
+      title: 'Dismiss',
+      onClick: () => alert('dismiss')
+    },
+    title: 'Something went wrong while loading your data.'
+  },
+  name: 'With Actions'
+};
+const WithCategoryAndHelpText = exports.WithCategoryAndHelpText = {
+  args: {
+    category: 'Notice',
+    colorTheme: _constants.COLOR_THEMES.INFORMATION,
+    helpText: 'Contact billing if you have any questions.',
+    title: 'Your invoice is due in 3 days.'
+  },
+  name: 'With Category and Help Text'
+};
+const WithDescription = exports.WithDescription = {
+  args: {
+    colorTheme: _constants.COLOR_THEMES.INFORMATION,
+    description: 'This action cannot be undone. All associated data will be permanently removed.',
+    title: 'Are you sure you want to delete this account?'
+  },
+  name: 'With Description'
+};
+const VerticalLayout = exports.VerticalLayout = {
+  args: {
+    button: {
+      title: 'View Details',
+      onClick: () => alert('details')
+    },
+    buttonPlacement: _constants.PLACEMENTS.VERTICAL,
+    category: 'Update',
+    colorTheme: _constants.COLOR_THEMES.PRIMARY,
+    description: 'This update includes performance improvements and bug fixes.',
+    helpText: 'Restart the app to apply changes.',
+    iconPlacement: _constants.PLACEMENTS.VERTICAL,
+    secondaryButton: {
+      title: 'Later',
+      onClick: () => alert('later')
+    },
+    size: _constants.SIZES.LARGE,
+    title: 'A new version is available.'
+  },
+  name: 'Vertical Layout'
+};
+const DarkVariant = exports.DarkVariant = {
+  args: {
+    colorTheme: _constants.COLOR_THEMES.NEGATIVE,
+    onClose: () => alert('closed'),
+    title: 'Critical maintenance scheduled for tonight.',
+    variant: _constants.VARIANTS.DARK
+  },
+  name: 'Dark Variant'
+};

package/dist/components/UTBanner/styles.module.scss

@@ -1,7 +1,151 @@
 .bannerContainer {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    grid-gap: 16px;
-    padding: 16px;
+  align-items: flex-start;
+  border-radius: var(--UT-banner-radius, 8px);
+  display: flex;
+  flex-direction: row;
+}
+
+.contentContainer {
+  display: flex;
+  flex: 1;
+}
+
+.contentHorizontal {
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.contentVertical {
+  flex-direction: column;
+}
+
+.iconTextContainer {
+  display: flex;
+  grid-gap: var(--UT-banner-icon-gap, 12px);
+}
+
+.iconHorizontal {
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.iconVertical {
+  flex-direction: column;
+}
+
+.iconFlex {
+  flex: 1;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--UT-banner-text-gap, 8px);
+}
+
+.textFlex {
+  flex: 1;
+}
+
+.buttonsContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  grid-gap: var(--UT-banner-buttons-gap, 8px);
+}
+
+.buttonsVertical {
+  align-self: flex-start;
+}
+
+.gapSmall {
+  grid-gap: var(--UT-banner-gap-sm, 8px);
+}
+
+.gapMedium {
+  grid-gap: var(--UT-banner-gap-md, 16px);
+}
+
+.gapLarge {
+  grid-gap: var(--UT-banner-gap-lg, 24px);
+}
+
+.paddingSmall {
+  padding: var(--UT-banner-padding-y-sm, 8px) var(--UT-banner-padding-x-sm, 12px);
+}
+
+.paddingMedium {
+  padding: var(--UT-banner-padding-md, 16px);
+}
+
+.paddingLarge {
+  padding: var(--UT-banner-padding-lg, 24px);
+}
+
+.errorLight {
+  background-color: var(--actionError01);
+}
+
+.errorDark {
+  background-color: var(--actionError04);
+}
+
+.grayLight {
+  background-color: var(--light02);
+}
+
+.grayDark {
+  background-color: var(--gray05);
+}
+
+.informationLight {
+  background-color: var(--semanticInformation01);
+}
+
+.informationDark {
+  background-color: var(--semanticInformation04);
+}
+
+.negativeLight {
+  background-color: var(--actionNegative02);
+}
+
+.negativeDark {
+  background-color: var(--actionNegative04);
+}
+
+.primaryLight {
+  background-color: var(--actionAccent01);
+}
+
+.primaryDark {
+  background-color: var(--actionAccent04);
+}
+
+.successLight {
+  background-color: var(--semanticSuccess01);
+}
+
+.successDark {
+  background-color: var(--semanticSuccess04);
+}
+
+.warningLight {
+  background-color: var(--semanticWarning01);
+}
+
+.warningDark {
+  background-color: var(--semanticWarning04);
+}
+
+.whiteLight {
+  background-color: var(--light01);
+}
+
+.whiteDark {
+  background-color: var(--dark04);
+}
+
+.uppercase {
+  text-transform: uppercase;
 }

package/dist/components/UTBanner/types.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonType = void 0;
+var _propTypes = require("prop-types");
+const buttonType = exports.buttonType = (0, _propTypes.shape)({
+  colorTheme: _propTypes.string,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  Icon: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.func]),
+  iconPlacement: _propTypes.string,
+  loading: _propTypes.bool,
+  onClick: _propTypes.func,
+  size: _propTypes.string,
+  title: _propTypes.node,
+  type: _propTypes.string,
+  variant: _propTypes.string
+});