Fix #4093: Button: Size 'large' or 'lg' (#4121)

* Fix #4093: Button: Size 'large' or 'lg' * Update API doc --------- Co-authored-by: GitHub Actions Bot <>
primefaces · Mar 3, 2023 · ce30f90 · ce30f90
1 parent 2acc26f
commit ce30f90
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -3228,9 +3228,9 @@
  "name": "size",
  "optional": true,
  "readonly": false,
- "type": "\"sm\" | \"lg\"",
+ "type": "\"small\" | \"large\"",
  "default": "",
- "description": "Defines the size of the button, valid values are \"sm\" and \"lg\"."
+ "description": "Defines the size of the button, valid values are \"small\" and \"large\"."
  },
  {
  "name": "text",

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -50,6 +50,11 @@ export const Button = React.memo(
  const showTooltip = !disabled || (props.tooltipOptions && props.tooltipOptions.showOnDisabled);
  const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
  const otherProps = ButtonBase.getOtherProps(props);
+ const sizeMapping = {
+ large: 'lg',
+ small: 'sm'
+ };
+ const size = sizeMapping[props.size];
  const className = classNames('p-button p-component', props.className, {
  'p-button-icon-only': (props.icon || (props.loading && props.loadingIcon)) && !props.label && !props.children,
  'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
@@ -62,7 +67,7 @@ export const Button = React.memo(
  'p-button-rounded': props.rounded,
  'p-button-loading-label-only': props.loading && !props.icon && props.label,
  [`p-button-loading-${props.iconPos}`]: props.loading && props.loadingIcon && props.label,
- [`p-button-${props.size}`]: props.size,
+ [`p-button-${size}`]: size,
  [`p-button-${props.severity}`]: props.severity
  });
 

diff --git a/components/lib/button/button.d.ts b/components/lib/button/button.d.ts
@@ -68,9 +68,9 @@ export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHT
  */
  severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | undefined;
  /**
- * Defines the size of the button, valid values are "sm" and "lg".
+ * Defines the size of the button, valid values are "small" and "large".
  */
- size?: 'sm' | 'lg' | undefined;
+ size?: 'small' | 'large' | undefined;
  /**
  * Position of the icon, valid values are "left", "right", "top" and "bottom".
  * @defaultValue left