@workday/canvas-kit-react-button - npm Package Compare versions

Comparing version 3.0.0-alpha.6 to 3.0.0-alpha.7

dist/commonjs/lib/Button.d.ts

 import * as React from 'react';
-import { ButtonTypes, ButtonSizes, BetaButtonTypes } from './types';
+import { ButtonVariant, ButtonSize, BetaButtonVariant } from './types';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { GrowthBehavior } from '@workday/canvas-kit-react-common';
-export interface BaseButtonProps<T = ButtonTypes | BetaButtonTypes> extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    buttonType?: T;
-    buttonSize?: ButtonSizes;
+export interface BaseButtonProps<T = ButtonVariant | BetaButtonVariant> extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: T;
+    size?: ButtonSize;
     buttonRef?: React.Ref<HTMLButtonElement>;
@@ -12,11 +12,11 @@ dataLabel?: String;
 }
-export interface ButtonProps<T = ButtonTypes | BetaButtonTypes> extends BaseButtonProps<T>, GrowthBehavior {
+export interface ButtonProps<T = ButtonVariant | BetaButtonVariant> extends BaseButtonProps<T>, GrowthBehavior {
     children: React.ReactNode;
 }
 export default class Button extends React.Component<ButtonProps> {
-    static Types: typeof ButtonTypes;
-    static Sizes: typeof ButtonSizes;
+    static Variant: typeof ButtonVariant;
+    static Size: typeof ButtonSize;
     static defaultProps: {
-        buttonSize: ButtonSizes;
-        buttonType: ButtonTypes;
+        size: ButtonSize;
+        variant: ButtonVariant;
         grow: boolean;
@@ -26,8 +26,8 @@ };
 }
-export declare class beta_Button extends React.Component<ButtonProps<BetaButtonTypes>> {
-    static Types: typeof BetaButtonTypes;
-    static Sizes: typeof ButtonSizes;
+export declare class beta_Button extends React.Component<ButtonProps<BetaButtonVariant>> {
+    static Variant: typeof BetaButtonVariant;
+    static Size: typeof ButtonSize;
     static defaultProps: {
-        buttonSize: ButtonSizes;
-        buttonType: BetaButtonTypes;
+        size: ButtonSize;
+        variant: BetaButtonVariant;
         grow: boolean;
@@ -34,0 +34,0 @@ };

dist/commonjs/lib/Button.js

@@ -63,11 +63,16 @@ 'use strict';
         var _a = this.props,
+            variant = _a.variant,
+            size = _a.size,
             buttonRef = _a.buttonRef,
-            elemProps = __rest(_a, ["buttonRef"]);
-        return React.createElement(_ButtonBase.ButtonBaseCon, __assign({}, elemProps, { innerRef: buttonRef }), elemProps.icon && React.createElement(_ButtonBase.ButtonLabelIcon, __assign({}, elemProps)), React.createElement(_ButtonBase.ButtonBaseLabel, { buttonSize: elemProps.buttonSize, buttonType: elemProps.buttonType }, elemProps.children), elemProps.dataLabel && React.createElement(_ButtonBase.ButtonLabelData, __assign({ className: _ButtonStyles.labelDataBaseStyles.classname }, elemProps), elemProps.dataLabel));
+            dataLabel = _a.dataLabel,
+            icon = _a.icon,
+            children = _a.children,
+            elemProps = __rest(_a, ["variant", "size", "buttonRef", "dataLabel", "icon", "children"]);
+        return React.createElement(_ButtonBase.ButtonBaseCon, __assign({ variant: variant, size: size, innerRef: buttonRef }, elemProps), icon && React.createElement(_ButtonBase.ButtonLabelIcon, { size: size, icon: icon }), React.createElement(_ButtonBase.ButtonBaseLabel, { size: size, variant: variant }, children), dataLabel && React.createElement(_ButtonBase.ButtonLabelData, { size: size, className: _ButtonStyles.labelDataBaseStyles.classname }, dataLabel));
     };
-    Button.Types = _types.ButtonTypes;
-    Button.Sizes = _types.ButtonSizes;
+    Button.Variant = _types.ButtonVariant;
+    Button.Size = _types.ButtonSize;
     Button.defaultProps = {
-        buttonSize: _types.ButtonSizes.Large,
-        buttonType: _types.ButtonTypes.Secondary,
+        size: _types.ButtonSize.Large,
+        variant: _types.ButtonVariant.Secondary,
         grow: false
@@ -85,3 +90,7 @@ };
     beta_Button.prototype.render = function () {
-        if (this.props.buttonType === _types.BetaButtonTypes.Highlight && (this.props.icon === undefined || this.props.buttonSize === _types.ButtonSizes.Small)) {
+        var _a = this.props,
+            variant = _a.variant,
+            size = _a.size,
+            icon = _a.icon;
+        if (variant === _types.BetaButtonVariant.Highlight && (icon === undefined || size === _types.ButtonSize.Small)) {
             return null;
@@ -91,7 +100,7 @@ }
     };
-    beta_Button.Types = _types.BetaButtonTypes;
-    beta_Button.Sizes = _types.ButtonSizes;
+    beta_Button.Variant = _types.BetaButtonVariant;
+    beta_Button.Size = _types.ButtonSize;
     beta_Button.defaultProps = {
-        buttonSize: _types.ButtonSizes.Medium,
-        buttonType: _types.BetaButtonTypes.Secondary,
+        size: _types.ButtonSize.Medium,
+        variant: _types.BetaButtonVariant.Secondary,
         grow: false
@@ -98,0 +107,0 @@ };

dist/commonjs/lib/ButtonBase.d.ts

 import * as React from 'react';
-import { ButtonSizes, ButtonTypes, AllButtonTypes, BetaButtonTypes } from './types';
+import { ButtonSize, ButtonVariant, IconPosition, AllButtonVariants, BetaButtonVariant } from './types';
 import { ButtonProps, BaseButtonProps } from './Button';
 import * as ButtonStyles from './ButtonStyles';
-export declare const ButtonBaseCon: import("create-emotion-styled").StyledOtherComponent<ButtonProps<ButtonTypes | BetaButtonTypes>, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, any>;
-export declare const ButtonBaseLabel: import("create-emotion-styled").StyledOtherComponent<ButtonProps<AllButtonTypes>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>;
-export declare const ButtonLabelData: import("create-emotion-styled").StyledOtherComponent<ButtonProps<ButtonTypes | BetaButtonTypes>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>;
-export interface ButtonLabelIconProps extends BaseButtonProps<AllButtonTypes> {
+export declare const ButtonBaseCon: import("create-emotion-styled").StyledOtherComponent<ButtonProps<ButtonVariant | BetaButtonVariant>, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, any>;
+export declare const ButtonBaseLabel: import("create-emotion-styled").StyledOtherComponent<ButtonProps<AllButtonVariants>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>;
+export declare const ButtonLabelData: import("create-emotion-styled").StyledOtherComponent<ButtonProps<ButtonVariant | BetaButtonVariant>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>;
+export interface ButtonLabelIconProps extends BaseButtonProps<AllButtonVariants> {
+    iconPosition?: IconPosition;
     dropdown?: boolean;
@@ -14,3 +15,3 @@ }
 }
-export declare function getButtonSize(baseButton: ButtonStyles.ButtonGenericStyle, buttonSize?: ButtonSizes): import("create-emotion").CSSObject | undefined;
-export declare function getButtonStyle(baseButton: ButtonStyles.ButtonGenericStyle, buttonType?: AllButtonTypes): import("create-emotion").CSSObject | undefined;
+export declare function getButtonSize(baseButton: ButtonStyles.ButtonGenericStyle, size?: ButtonSize): import("create-emotion").CSSObject | undefined;
+export declare function getButtonStyle(baseButton: ButtonStyles.ButtonGenericStyle, variant?: AllButtonVariants): import("create-emotion").CSSObject | undefined;

dist/commonjs/lib/ButtonBase.js

@@ -18,2 +18,6 @@ 'use strict';
 
+var _isPropValid = require('@emotion/is-prop-valid');
+
+var _isPropValid2 = _interopRequireDefault(_isPropValid);
+
 var _types = require('./types');
@@ -58,14 +62,25 @@
 };
+var __rest = undefined && undefined.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
 var ButtonBaseCon = /*#__PURE__*/exports.ButtonBaseCon = (0, _reactEmotion2.default)('button', {
+    shouldForwardProp: function (prop) {
+        return (0, _isPropValid2.default)(prop) && prop !== 'size';
+    },
     target: 'ee73cc40'
 })(function (_a) {
-    var buttonType = _a.buttonType,
-        buttonSize = _a.buttonSize;
-    if (buttonType === undefined) {
+    var variant = _a.variant,
+        size = _a.size;
+    if (variant === undefined) {
         return {};
     }
-    var baseButton = getBaseButton(buttonType);
-    var buttonStyles = getButtonStyle(baseButton, buttonType);
-    var buttonSizeStyles = buttonSize !== undefined ? getButtonSize(baseButton, buttonSize) : {};
-    return __assign({}, baseButton.styles, buttonStyles, buttonSizeStyles);
+    var baseButton = getBaseButton(variant);
+    var buttonStyles = getButtonStyle(baseButton, variant);
+    var sizeStyles = size !== undefined ? getButtonSize(baseButton, size) : {};
+    return __assign({}, baseButton.styles, buttonStyles, sizeStyles);
 }, function (_a) {
@@ -76,30 +91,33 @@ var grow = _a.grow;
 var ButtonBaseLabel = /*#__PURE__*/exports.ButtonBaseLabel = (0, _reactEmotion2.default)('span', {
+    shouldForwardProp: function (prop) {
+        return (0, _isPropValid2.default)(prop) && prop !== 'size';
+    },
     target: 'ee73cc41'
 })(ButtonStyles.labelBaseStyles.styles, function (_a) {
-    var buttonSize = _a.buttonSize;
+    var size = _a.size;
     var sizes = ButtonStyles.labelBaseStyles.variants.sizes;
-    switch (buttonSize) {
-        case _types.ButtonSizes.Large:
+    switch (size) {
+        case _types.ButtonSize.Large:
         default:
             return sizes.large;
-        case _types.ButtonSizes.Small:
+        case _types.ButtonSize.Small:
             return sizes.small;
-        case _types.ButtonSizes.Medium:
+        case _types.ButtonSize.Medium:
             return sizes.medium;
     }
 }, function (_a) {
-    var buttonType = _a.buttonType;
+    var variant = _a.variant;
     var types = ButtonStyles.labelBaseStyles.variants.types;
-    switch (buttonType) {
-        case _types.TextButtonTypes.Default:
-        case _types.TextButtonTypes.Inverse:
+    switch (variant) {
+        case _types.TextButtonVariant.Default:
+        case _types.TextButtonVariant.Inverse:
             return types.text;
-        case _types.TextButtonTypes.AllCaps:
-        case _types.TextButtonTypes.InverseAllCaps:
+        case _types.TextButtonVariant.AllCaps:
+        case _types.TextButtonVariant.InverseAllCaps:
             return types.textAllCaps;
-        case _types.ButtonTypes.Primary:
+        case _types.ButtonVariant.Primary:
             return types.primary;
-        case _types.ButtonTypes.Secondary:
+        case _types.ButtonVariant.Secondary:
             return types.secondary;
-        case _types.ButtonTypes.Delete:
+        case _types.ButtonVariant.Delete:
             return types.delete;
@@ -111,11 +129,14 @@ default:
 var ButtonLabelData = /*#__PURE__*/exports.ButtonLabelData = (0, _reactEmotion2.default)('span', {
+    shouldForwardProp: function (prop) {
+        return (0, _isPropValid2.default)(prop) && prop !== 'size';
+    },
     target: 'ee73cc42'
 })(ButtonStyles.labelDataBaseStyles.styles, function (_a) {
-    var buttonSize = _a.buttonSize;
+    var size = _a.size;
     var sizes = ButtonStyles.labelDataBaseStyles.variants.sizes;
-    switch (buttonSize) {
-        case _types.ButtonSizes.Large:
+    switch (size) {
+        case _types.ButtonSize.Large:
         default:
             return sizes.large;
-        case _types.ButtonSizes.Medium:
+        case _types.ButtonSize.Medium:
             return sizes.medium;
@@ -125,12 +146,15 @@ }
 var ButtonLabelIconStyled = /*#__PURE__*/(0, _reactEmotion2.default)('span', {
+    shouldForwardProp: function (prop) {
+        return (0, _isPropValid2.default)(prop) && prop !== 'size';
+    },
     target: 'ee73cc43'
 })(ButtonStyles.labelIconBaseStyles.styles, function (_a) {
-    var buttonSize = _a.buttonSize,
+    var size = _a.size,
         dropdown = _a.dropdown;
     if (dropdown) {
-        switch (buttonSize) {
-            case _types.ButtonSizes.Large:
+        switch (size) {
+            case _types.ButtonSize.Large:
             default:
                 return { padding: '0 8px 0 0' };
-            case _types.ButtonSizes.Medium:
+            case _types.ButtonSize.Medium:
                 return { padding: '0 4px 0 0' };
@@ -140,7 +164,7 @@ }
     var sizes = ButtonStyles.labelIconBaseStyles.variants.sizes;
-    switch (buttonSize) {
-        case _types.ButtonSizes.Large:
+    switch (size) {
+        case _types.ButtonSize.Large:
         default:
             return sizes.large;
-        case _types.ButtonSizes.Medium:
+        case _types.ButtonSize.Medium:
             return sizes.medium;
@@ -155,6 +179,6 @@ }
     switch (iconPosition) {
-        case _types.IconPositions.Left:
+        case _types.IconPosition.Left:
         default:
             return types.iconPositionLeft;
-        case _types.IconPositions.Right:
+        case _types.IconPosition.Right:
             return types.iconPositionRight;
@@ -169,10 +193,16 @@ }
     ButtonLabelIcon.prototype.render = function () {
-        if (this.props.icon === undefined) {
+        var _a = this.props,
+            icon = _a.icon,
+            size = _a.size,
+            dropdown = _a.dropdown,
+            iconPosition = _a.iconPosition,
+            elemProps = __rest(_a, ["icon", "size", "dropdown", "iconPosition"]);
+        if (icon === undefined) {
             return {};
         }
         var iconSize = 24;
-        if (this.props.buttonSize === _types.ButtonSizes.Small) {
+        if (size === _types.ButtonSize.Small) {
             iconSize = 20;
         }
-        return React.createElement(ButtonLabelIconStyled, __assign({}, this.props), React.createElement(_canvasKitReactIcon.SystemIcon, { size: iconSize, icon: this.props.icon }));
+        return React.createElement(ButtonLabelIconStyled, __assign({ iconPosition: iconPosition, dropdown: dropdown, size: size }, elemProps), React.createElement(_canvasKitReactIcon.SystemIcon, { size: iconSize, icon: icon }));
     };
@@ -182,78 +212,78 @@ return ButtonLabelIcon;
 exports.ButtonLabelIcon = ButtonLabelIcon;
-function getButtonSize(baseButton, buttonSize) {
+function getButtonSize(baseButton, size) {
     var sizes = baseButton.variants.sizes;
-    switch (buttonSize) {
-        case _types.ButtonSizes.Large:
+    switch (size) {
+        case _types.ButtonSize.Large:
             return sizes.large;
-        case _types.ButtonSizes.Medium:
+        case _types.ButtonSize.Medium:
         default:
             return sizes.medium;
-        case _types.ButtonSizes.Small:
+        case _types.ButtonSize.Small:
             return sizes.small;
     }
 }
-function getButtonStyle(baseButton, buttonType) {
+function getButtonStyle(baseButton, variant) {
     var types = baseButton.variants.types;
-    switch (buttonType) {
-        case _types.ButtonTypes.Primary:
+    switch (variant) {
+        case _types.ButtonVariant.Primary:
         default:
-            return types[_types.ButtonTypes.Primary];
-        case _types.ButtonTypes.Secondary:
-            return types[_types.ButtonTypes.Secondary];
-        case _types.ButtonTypes.Delete:
-            return types[_types.ButtonTypes.Delete];
-        case _types.BetaButtonTypes.Highlight:
-            return types[_types.BetaButtonTypes.Highlight];
-        case _types.BetaButtonTypes.OutlinePrimary:
-            return types[_types.BetaButtonTypes.OutlinePrimary];
-        case _types.BetaButtonTypes.OutlineSecondary:
-            return types[_types.BetaButtonTypes.OutlineSecondary];
-        case _types.BetaButtonTypes.OutlineInverse:
-            return types[_types.BetaButtonTypes.OutlineInverse];
-        case _types.BetaButtonTypes.Primary:
-            return types[_types.BetaButtonTypes.Primary];
-        case _types.BetaButtonTypes.Secondary:
-            return types[_types.BetaButtonTypes.Secondary];
-        case _types.BetaButtonTypes.Delete:
-            return types[_types.BetaButtonTypes.Delete];
-        case _types.TextButtonTypes.Default:
-            return types[_types.TextButtonTypes.Default];
-        case _types.TextButtonTypes.Inverse:
-            return types[_types.TextButtonTypes.Inverse];
-        case _types.TextButtonTypes.AllCaps:
-            return types[_types.TextButtonTypes.AllCaps];
-        case _types.TextButtonTypes.InverseAllCaps:
-            return types[_types.TextButtonTypes.InverseAllCaps];
-        case _types.IconButtonTypes.Square:
-            return types[_types.IconButtonTypes.Square];
-        case _types.IconButtonTypes.SquareFilled:
-            return types[_types.IconButtonTypes.SquareFilled];
-        case _types.IconButtonTypes.Plain:
-            return types[_types.IconButtonTypes.Plain];
-        case _types.IconButtonTypes.Circle:
-            return types[_types.IconButtonTypes.Circle];
-        case _types.IconButtonTypes.CircleFilled:
-            return types[_types.IconButtonTypes.CircleFilled];
-        case _types.IconButtonTypes.Inverse:
-            return types[_types.IconButtonTypes.Inverse];
-        case _types.IconButtonTypes.InverseFilled:
-            return types[_types.IconButtonTypes.InverseFilled];
+            return types[_types.ButtonVariant.Primary];
+        case _types.ButtonVariant.Secondary:
+            return types[_types.ButtonVariant.Secondary];
+        case _types.ButtonVariant.Delete:
+            return types[_types.ButtonVariant.Delete];
+        case _types.BetaButtonVariant.Highlight:
+            return types[_types.BetaButtonVariant.Highlight];
+        case _types.BetaButtonVariant.OutlinePrimary:
+            return types[_types.BetaButtonVariant.OutlinePrimary];
+        case _types.BetaButtonVariant.OutlineSecondary:
+            return types[_types.BetaButtonVariant.OutlineSecondary];
+        case _types.BetaButtonVariant.OutlineInverse:
+            return types[_types.BetaButtonVariant.OutlineInverse];
+        case _types.BetaButtonVariant.Primary:
+            return types[_types.BetaButtonVariant.Primary];
+        case _types.BetaButtonVariant.Secondary:
+            return types[_types.BetaButtonVariant.Secondary];
+        case _types.BetaButtonVariant.Delete:
+            return types[_types.BetaButtonVariant.Delete];
+        case _types.TextButtonVariant.Default:
+            return types[_types.TextButtonVariant.Default];
+        case _types.TextButtonVariant.Inverse:
+            return types[_types.TextButtonVariant.Inverse];
+        case _types.TextButtonVariant.AllCaps:
+            return types[_types.TextButtonVariant.AllCaps];
+        case _types.TextButtonVariant.InverseAllCaps:
+            return types[_types.TextButtonVariant.InverseAllCaps];
+        case _types.IconButtonVariant.Square:
+            return types[_types.IconButtonVariant.Square];
+        case _types.IconButtonVariant.SquareFilled:
+            return types[_types.IconButtonVariant.SquareFilled];
+        case _types.IconButtonVariant.Plain:
+            return types[_types.IconButtonVariant.Plain];
+        case _types.IconButtonVariant.Circle:
+            return types[_types.IconButtonVariant.Circle];
+        case _types.IconButtonVariant.CircleFilled:
+            return types[_types.IconButtonVariant.CircleFilled];
+        case _types.IconButtonVariant.Inverse:
+            return types[_types.IconButtonVariant.Inverse];
+        case _types.IconButtonVariant.InverseFilled:
+            return types[_types.IconButtonVariant.InverseFilled];
     }
 }
-function getBaseButton(buttonType) {
-    switch (buttonType) {
-        case _types.ButtonTypes.Primary:
-        case _types.ButtonTypes.Secondary:
-        case _types.ButtonTypes.Delete:
+function getBaseButton(variant) {
+    switch (variant) {
+        case _types.ButtonVariant.Primary:
+        case _types.ButtonVariant.Secondary:
+        case _types.ButtonVariant.Delete:
         default:
             return ButtonStyles.canvasButtonStyles;
-        case _types.BetaButtonTypes.Primary:
-        case _types.BetaButtonTypes.Secondary:
-        case _types.BetaButtonTypes.Delete:
-        case _types.BetaButtonTypes.Highlight:
-        case _types.BetaButtonTypes.OutlinePrimary:
-        case _types.BetaButtonTypes.OutlineSecondary:
-        case _types.BetaButtonTypes.OutlineInverse:
+        case _types.BetaButtonVariant.Primary:
+        case _types.BetaButtonVariant.Secondary:
+        case _types.BetaButtonVariant.Delete:
+        case _types.BetaButtonVariant.Highlight:
+        case _types.BetaButtonVariant.OutlinePrimary:
+        case _types.BetaButtonVariant.OutlineSecondary:
+        case _types.BetaButtonVariant.OutlineInverse:
             return ButtonStyles.betaButtonStyles;
     }
 }

dist/commonjs/lib/ButtonColors.d.ts

 import canvas from '@workday/canvas-kit-react-core';
-import { AllButtonTypes } from './types';
+import { AllButtonVariants } from './types';
 export interface CanvasButtonColors extends Partial<typeof canvas.buttonColors.secondary>, Partial<typeof canvas.buttonColors.primary>, Partial<typeof canvas.buttonColors.delete> {
@@ -20,5 +20,5 @@ }
 export declare type ButtonColorCollection = {
-    [key in AllButtonTypes]: GenericButtonColors | null;
+    [key in AllButtonVariants]: GenericButtonColors | null;
 };
 export declare const ButtonColors: ButtonColorCollection;
 export default ButtonColors;

dist/commonjs/lib/ButtonColors.js

@@ -17,3 +17,3 @@ 'use strict';
 var _a;
-var ButtonColors = exports.ButtonColors = (_a = {}, _a[_types.ButtonTypes.Primary] = _canvasKitReactCore2.default.buttonColors.primary, _a[_types.ButtonTypes.Secondary] = _canvasKitReactCore2.default.buttonColors.secondary, _a[_types.ButtonTypes.Delete] = _canvasKitReactCore2.default.buttonColors.delete, _a[_types.BetaButtonTypes.Primary] = {
+var ButtonColors = exports.ButtonColors = (_a = {}, _a[_types.ButtonVariant.Primary] = _canvasKitReactCore2.default.buttonColors.primary, _a[_types.ButtonVariant.Secondary] = _canvasKitReactCore2.default.buttonColors.secondary, _a[_types.ButtonVariant.Delete] = _canvasKitReactCore2.default.buttonColors.delete, _a[_types.BetaButtonVariant.Primary] = {
     background: _canvasKitReactCore2.default.colors.blueberry400,
@@ -39,3 +39,3 @@ border: 'transparent',
     labelIconDisabled: _canvasKitReactCore2.default.colors.frenchVanilla100
-}, _a[_types.BetaButtonTypes.Secondary] = {
+}, _a[_types.BetaButtonVariant.Secondary] = {
     background: _canvasKitReactCore2.default.colors.soap200,
@@ -63,3 +63,3 @@ border: 'transparent',
     labelDataDisabled: _canvasKitReactCore2.default.colors.licorice100
-}, _a[_types.BetaButtonTypes.Delete] = {
+}, _a[_types.BetaButtonVariant.Delete] = {
     background: _canvasKitReactCore2.default.colors.cinnamon500,
@@ -79,3 +79,3 @@ border: _canvasKitReactCore2.default.colors.cinnamon500,
     hoverText: _canvasKitReactCore2.default.colors.frenchVanilla100
-}, _a[_types.BetaButtonTypes.Highlight] = {
+}, _a[_types.BetaButtonVariant.Highlight] = {
     background: _canvasKitReactCore2.default.colors.soap200,
@@ -101,3 +101,3 @@ border: _canvasKitReactCore2.default.colors.soap200,
     labelIconDisabled: _canvasKitReactCore2.default.colors.soap600
-}, _a[_types.BetaButtonTypes.OutlinePrimary] = {
+}, _a[_types.BetaButtonVariant.OutlinePrimary] = {
     background: 'transparent',
@@ -123,3 +123,3 @@ border: _canvasKitReactCore2.default.colors.blueberry400,
     labelIconDisabled: _canvasKitReactCore2.default.colors.soap600
-}, _a[_types.BetaButtonTypes.OutlineSecondary] = {
+}, _a[_types.BetaButtonVariant.OutlineSecondary] = {
     background: 'transparent',
@@ -145,3 +145,3 @@ border: _canvasKitReactCore2.default.colors.soap500,
     labelIconDisabled: _canvasKitReactCore2.default.colors.soap600
-}, _a[_types.BetaButtonTypes.OutlineInverse] = {
+}, _a[_types.BetaButtonVariant.OutlineInverse] = {
     background: 'transparent',
@@ -173,3 +173,3 @@ border: _canvasKitReactCore2.default.colors.frenchVanilla100,
     labelDataDisabled: 'rgba(255, 255, 255, 0.75)'
-}, _a[_types.TextButtonTypes.Default] = {
+}, _a[_types.TextButtonVariant.Default] = {
     background: 'transparent',
@@ -193,3 +193,3 @@ border: 'transparent',
     labelIconDisabled: 'rgba(8, 117, 225, 0.5)'
-}, _a[_types.TextButtonTypes.Inverse] = {
+}, _a[_types.TextButtonVariant.Inverse] = {
     background: 'transparent',
@@ -214,3 +214,3 @@ border: 'transparent',
     labelIconDisabled: 'rgba(255, 255, 255, 0.5)'
-}, _a[_types.TextButtonTypes.AllCaps] = null, _a[_types.TextButtonTypes.InverseAllCaps] = null, _a[_types.IconButtonTypes.Square] = {
+}, _a[_types.TextButtonVariant.AllCaps] = null, _a[_types.TextButtonVariant.InverseAllCaps] = null, _a[_types.IconButtonVariant.Square] = {
     background: 'transparent',
@@ -226,3 +226,3 @@ activeBackground: _canvasKitReactCore2.default.colors.soap400,
     labelIconDisabled: _canvasKitReactCore2.default.colors.soap600
-}, _a[_types.IconButtonTypes.SquareFilled] = {
+}, _a[_types.IconButtonVariant.SquareFilled] = {
     background: _canvasKitReactCore2.default.colors.soap200,
@@ -237,3 +237,3 @@ border: _canvasKitReactCore2.default.colors.soap500,
     labelIconDisabled: _canvasKitReactCore2.default.colors.soap600
-}, _a[_types.IconButtonTypes.Plain] = {
+}, _a[_types.IconButtonVariant.Plain] = {
     background: 'transparent',
@@ -250,3 +250,3 @@ activeBackground: 'transparent',
     labelIconDisabled: _canvasKitReactCore2.default.colors.soap600
-}, _a[_types.IconButtonTypes.Circle] = {
+}, _a[_types.IconButtonVariant.Circle] = {
     background: 'transparent',
@@ -262,3 +262,3 @@ activeBackground: _canvasKitReactCore2.default.colors.soap400,
     labelIconDisabled: _canvasKitReactCore2.default.colors.soap600
-}, _a[_types.IconButtonTypes.CircleFilled] = {
+}, _a[_types.IconButtonVariant.CircleFilled] = {
     background: _canvasKitReactCore2.default.colors.soap200,
@@ -272,3 +272,3 @@ activeBackground: _canvasKitReactCore2.default.colors.soap500,
     labelIconDisabled: _canvasKitReactCore2.default.colors.soap600
-}, _a[_types.IconButtonTypes.Inverse] = {
+}, _a[_types.IconButtonVariant.Inverse] = {
     background: 'transparent',
@@ -282,3 +282,3 @@ activeBackground: 'rgba(0, 0, 0, 0.4)',
     focusRingOuter: _canvasKitReactCore2.default.colors.frenchVanilla100
-}, _a[_types.IconButtonTypes.InverseFilled] = {
+}, _a[_types.IconButtonVariant.InverseFilled] = {
     background: 'rgba(0, 0, 0, 0.2)',
@@ -285,0 +285,0 @@ activeBackground: 'rgba(0, 0, 0, 0.4)',

dist/commonjs/lib/ButtonStyles.d.ts

 import { GenericStyle } from '@workday/canvas-kit-react-common';
 import { CSSObject } from 'create-emotion';
-import { ButtonSizes, IconPositions, AllButtonTypes } from './types';
+import { ButtonSize, IconPosition, AllButtonVariants } from './types';
 export declare const CANVAS_BUTTON_HEIGHT_LARGE: number;
@@ -10,6 +10,6 @@ export declare const CANVAS_BUTTON_HEIGHT_MEDIUM: number;
         types: {
-            [key in AllButtonTypes | IconPositions]?: CSSObject;
+            [key in AllButtonVariants | IconPosition]?: CSSObject;
         };
         sizes: {
-            [key in ButtonSizes]?: CSSObject;
+            [key in ButtonSize]?: CSSObject;
         };
@@ -16,0 +16,0 @@ };

dist/commonjs/lib/ButtonStyles.js

@@ -50,13 +50,13 @@ 'use strict';
     variants: {
-        types: (_a = {}, _a[_types.TextButtonTypes.Default] = {
+        types: (_a = {}, _a[_types.TextButtonVariant.Default] = {
             padding: '0'
-        }, _a[_types.TextButtonTypes.AllCaps] = __assign({}, _canvasKitReactCore2.default.type.variant.caps, { fontSize: '14px', letterSpacing: '.5px', padding: '0' }), _a[_types.ButtonTypes.Primary] = {
+        }, _a[_types.TextButtonVariant.AllCaps] = __assign({}, _canvasKitReactCore2.default.type.variant.caps, { fontSize: '14px', letterSpacing: '.5px', padding: '0' }), _a[_types.ButtonVariant.Primary] = {
             fontSize: 'inherit',
             fontWeight: 'inherit',
             padding: '0'
-        }, _a[_types.ButtonTypes.Secondary] = {
+        }, _a[_types.ButtonVariant.Secondary] = {
             fontSize: 'inherit',
             fontWeight: 'inherit',
             padding: '0'
-        }, _a[_types.ButtonTypes.Delete] = {
+        }, _a[_types.ButtonVariant.Delete] = {
             fontSize: 'inherit',
@@ -66,9 +66,9 @@ fontWeight: 'inherit',
         }, _a),
-        sizes: (_b = {}, _b[_types.ButtonSizes.Large] = {
+        sizes: (_b = {}, _b[_types.ButtonSize.Large] = {
             fontSize: '16px',
             padding: '0 12px'
-        }, _b[_types.ButtonSizes.Medium] = {
+        }, _b[_types.ButtonSize.Medium] = {
             fontSize: '14px',
             padding: '0 8px'
-        }, _b[_types.ButtonSizes.Small] = {
+        }, _b[_types.ButtonSize.Small] = {
             fontSize: '14px',
@@ -84,5 +84,5 @@ padding: '0'
         types: {},
-        sizes: (_c = {}, _c[_types.ButtonSizes.Large] = {
+        sizes: (_c = {}, _c[_types.ButtonSize.Large] = {
             paddingRight: '12px'
-        }, _c[_types.ButtonSizes.Medium] = {
+        }, _c[_types.ButtonSize.Medium] = {
             paddingRight: '8px',
@@ -99,10 +99,10 @@ fontSize: '14px'
     variants: {
-        types: (_d = {}, _d[_types.IconPositions.Left] = {
+        types: (_d = {}, _d[_types.IconPosition.Left] = {
             padding: '0 8px 0 0'
-        }, _d[_types.IconPositions.Right] = {
+        }, _d[_types.IconPosition.Right] = {
             padding: '0 0 0 8px'
         }, _d),
-        sizes: (_e = {}, _e[_types.ButtonSizes.Large] = {
+        sizes: (_e = {}, _e[_types.ButtonSize.Large] = {
             paddingLeft: '8px'
-        }, _e[_types.ButtonSizes.Medium] = {
+        }, _e[_types.ButtonSize.Medium] = {
             paddingLeft: '4px'
@@ -131,4 +131,4 @@ }, _e)
     variants: {
-        types: (_f = {}, _f[_types.ButtonTypes.Primary] = __assign({}, getButtonStateStyle(_types.ButtonTypes.Primary)), _f[_types.ButtonTypes.Secondary] = __assign({}, getButtonStateStyle(_types.ButtonTypes.Secondary)), _f[_types.ButtonTypes.Delete] = __assign({}, getButtonStateStyle(_types.ButtonTypes.Delete)), _f),
-        sizes: (_g = {}, _g[_types.ButtonSizes.Large] = {
+        types: (_f = {}, _f[_types.ButtonVariant.Primary] = __assign({}, getButtonStateStyle(_types.ButtonVariant.Primary)), _f[_types.ButtonVariant.Secondary] = __assign({}, getButtonStateStyle(_types.ButtonVariant.Secondary)), _f[_types.ButtonVariant.Delete] = __assign({}, getButtonStateStyle(_types.ButtonVariant.Delete)), _f),
+        sizes: (_g = {}, _g[_types.ButtonSize.Large] = {
             height: CANVAS_BUTTON_HEIGHT_LARGE + "px",
@@ -140,3 +140,3 @@ padding: "0 " + _canvasKitReactCore2.default.spacing.l,
             fontWeight: 500
-        }, _g[_types.ButtonSizes.Medium] = {
+        }, _g[_types.ButtonSize.Medium] = {
             height: CANVAS_BUTTON_HEIGHT_MEDIUM + "px",
@@ -148,3 +148,3 @@ padding: "0 " + _canvasKitReactCore2.default.spacing.m,
             fontWeight: 500
-        }, _g[_types.ButtonSizes.Small] = {
+        }, _g[_types.ButtonSize.Small] = {
             height: CANVAS_BUTTON_HEIGHT_SMALL + "px",
@@ -163,12 +163,12 @@ padding: "0 " + _canvasKitReactCore2.default.spacing.xxs,
     variants: {
-        types: (_h = {}, _h[_types.BetaButtonTypes.Primary] = __assign({}, getButtonStateStyle(_types.BetaButtonTypes.Primary)), _h[_types.BetaButtonTypes.Secondary] = __assign({}, getButtonStateStyle(_types.BetaButtonTypes.Secondary)), _h[_types.BetaButtonTypes.Delete] = __assign({}, getButtonStateStyle(_types.BetaButtonTypes.Delete)), _h[_types.BetaButtonTypes.Highlight] = __assign({}, getButtonStateStyle(_types.BetaButtonTypes.Highlight)), _h[_types.BetaButtonTypes.OutlinePrimary] = __assign({}, getButtonStateStyle(_types.BetaButtonTypes.OutlinePrimary)), _h[_types.BetaButtonTypes.OutlineSecondary] = __assign({}, getButtonStateStyle(_types.BetaButtonTypes.OutlineSecondary)), _h[_types.BetaButtonTypes.OutlineInverse] = __assign({}, getButtonStateStyle(_types.BetaButtonTypes.OutlineInverse)), _h),
-        sizes: (_j = {}, _j[_types.ButtonSizes.Large] = {
+        types: (_h = {}, _h[_types.BetaButtonVariant.Primary] = __assign({}, getButtonStateStyle(_types.BetaButtonVariant.Primary)), _h[_types.BetaButtonVariant.Secondary] = __assign({}, getButtonStateStyle(_types.BetaButtonVariant.Secondary)), _h[_types.BetaButtonVariant.Delete] = __assign({}, getButtonStateStyle(_types.BetaButtonVariant.Delete)), _h[_types.BetaButtonVariant.Highlight] = __assign({}, getButtonStateStyle(_types.BetaButtonVariant.Highlight)), _h[_types.BetaButtonVariant.OutlinePrimary] = __assign({}, getButtonStateStyle(_types.BetaButtonVariant.OutlinePrimary)), _h[_types.BetaButtonVariant.OutlineSecondary] = __assign({}, getButtonStateStyle(_types.BetaButtonVariant.OutlineSecondary)), _h[_types.BetaButtonVariant.OutlineInverse] = __assign({}, getButtonStateStyle(_types.BetaButtonVariant.OutlineInverse)), _h),
+        sizes: (_j = {}, _j[_types.ButtonSize.Large] = {
             minWidth: '112px',
             height: '48px',
             padding: '0 18px'
-        }, _j[_types.ButtonSizes.Medium] = {
+        }, _j[_types.ButtonSize.Medium] = {
             minWidth: '96px',
             height: _canvasKitReactCore2.default.spacing.xl,
             padding: '0 14px'
-        }, _j[_types.ButtonSizes.Small] = {
+        }, _j[_types.ButtonSize.Small] = {
             minWidth: '80px',
@@ -184,4 +184,4 @@ height: _canvasKitReactCore2.default.spacing.l,
     variants: {
-        types: (_k = {}, _k[_types.BetaButtonTypes.Primary] = betaButtonStyles.variants.types[_types.BetaButtonTypes.Primary], _k[_types.BetaButtonTypes.Secondary] = betaButtonStyles.variants.types[_types.BetaButtonTypes.Secondary], _k),
-        sizes: (_l = {}, _l[_types.ButtonSizes.Large] = betaButtonStyles.variants.sizes.large, _l[_types.ButtonSizes.Medium] = betaButtonStyles.variants.sizes.medium, _l)
+        types: (_k = {}, _k[_types.BetaButtonVariant.Primary] = betaButtonStyles.variants.types[_types.BetaButtonVariant.Primary], _k[_types.BetaButtonVariant.Secondary] = betaButtonStyles.variants.types[_types.BetaButtonVariant.Secondary], _k),
+        sizes: (_l = {}, _l[_types.ButtonSize.Large] = betaButtonStyles.variants.sizes.large, _l[_types.ButtonSize.Medium] = betaButtonStyles.variants.sizes.medium, _l)
     }
@@ -193,7 +193,7 @@ };
     variants: {
-        types: (_m = {}, _m[_types.TextButtonTypes.Default] = __assign({}, getButtonStateStyle(_types.TextButtonTypes.Default)), _m[_types.TextButtonTypes.Inverse] = __assign({}, getButtonStateStyle(_types.TextButtonTypes.Inverse)), _m[_types.TextButtonTypes.AllCaps] = __assign({}, getButtonStateStyle(_types.TextButtonTypes.Default), { height: _canvasKitReactCore2.default.spacing.l }), _m[_types.TextButtonTypes.InverseAllCaps] = __assign({}, getButtonStateStyle(_types.TextButtonTypes.Inverse), { height: _canvasKitReactCore2.default.spacing.l }), _m),
-        sizes: (_o = {}, _o[_types.ButtonSizes.Large] = {
+        types: (_m = {}, _m[_types.TextButtonVariant.Default] = __assign({}, getButtonStateStyle(_types.TextButtonVariant.Default)), _m[_types.TextButtonVariant.Inverse] = __assign({}, getButtonStateStyle(_types.TextButtonVariant.Inverse)), _m[_types.TextButtonVariant.AllCaps] = __assign({}, getButtonStateStyle(_types.TextButtonVariant.Default), { height: _canvasKitReactCore2.default.spacing.l }), _m[_types.TextButtonVariant.InverseAllCaps] = __assign({}, getButtonStateStyle(_types.TextButtonVariant.Inverse), { height: _canvasKitReactCore2.default.spacing.l }), _m),
+        sizes: (_o = {}, _o[_types.ButtonSize.Large] = {
             height: _canvasKitReactCore2.default.spacing.xl,
             padding: '0 8px'
-        }, _o[_types.ButtonSizes.Small] = {
+        }, _o[_types.ButtonSize.Small] = {
             height: _canvasKitReactCore2.default.spacing.l,
@@ -211,3 +211,3 @@ padding: '0 8px'
     variants: {
-        sizes: (_q = {}, _q[_types.ButtonSizes.Small] = {
+        sizes: (_q = {}, _q[_types.ButtonSize.Small] = {
             width: _canvasKitReactCore2.default.spacing.l,
@@ -219,12 +219,12 @@ height: _canvasKitReactCore2.default.spacing.l,
             }
-        }, _q[_types.ButtonSizes.Medium] = {
+        }, _q[_types.ButtonSize.Medium] = {
             width: _canvasKitReactCore2.default.spacing.xl,
             height: _canvasKitReactCore2.default.spacing.xl
         }, _q),
-        types: (_r = {}, _r[_types.IconButtonTypes.Square] = __assign({ borderRadius: '4px', width: _canvasKitReactCore2.default.spacing.l, height: _canvasKitReactCore2.default.spacing.l }, getButtonStateStyle(_types.IconButtonTypes.Square)), _r[_types.IconButtonTypes.SquareFilled] = __assign({ borderRadius: '4px', width: _canvasKitReactCore2.default.spacing.l, height: _canvasKitReactCore2.default.spacing.l }, getButtonStateStyle(_types.IconButtonTypes.SquareFilled)), _r[_types.IconButtonTypes.Plain] = __assign({}, getButtonStateStyle(_types.IconButtonTypes.Plain)), _r[_types.IconButtonTypes.Circle] = __assign({}, getButtonStateStyle(_types.IconButtonTypes.Circle)), _r[_types.IconButtonTypes.CircleFilled] = __assign({}, getButtonStateStyle(_types.IconButtonTypes.CircleFilled)), _r[_types.IconButtonTypes.Inverse] = __assign({}, getButtonStateStyle(_types.IconButtonTypes.Inverse)), _r[_types.IconButtonTypes.InverseFilled] = __assign({}, getButtonStateStyle(_types.IconButtonTypes.InverseFilled)), _r)
+        types: (_r = {}, _r[_types.IconButtonVariant.Square] = __assign({ borderRadius: '4px', width: _canvasKitReactCore2.default.spacing.l, height: _canvasKitReactCore2.default.spacing.l }, getButtonStateStyle(_types.IconButtonVariant.Square)), _r[_types.IconButtonVariant.SquareFilled] = __assign({ borderRadius: '4px', width: _canvasKitReactCore2.default.spacing.l, height: _canvasKitReactCore2.default.spacing.l }, getButtonStateStyle(_types.IconButtonVariant.SquareFilled)), _r[_types.IconButtonVariant.Plain] = __assign({}, getButtonStateStyle(_types.IconButtonVariant.Plain)), _r[_types.IconButtonVariant.Circle] = __assign({}, getButtonStateStyle(_types.IconButtonVariant.Circle)), _r[_types.IconButtonVariant.CircleFilled] = __assign({}, getButtonStateStyle(_types.IconButtonVariant.CircleFilled)), _r[_types.IconButtonVariant.Inverse] = __assign({}, getButtonStateStyle(_types.IconButtonVariant.Inverse)), _r[_types.IconButtonVariant.InverseFilled] = __assign({}, getButtonStateStyle(_types.IconButtonVariant.InverseFilled)), _r)
     }
 };
-function getButtonStateStyle(buttonType) {
+function getButtonStateStyle(variant) {
     var _a, _b, _c, _d, _e;
-    var buttonColors = _ButtonColors.ButtonColors[buttonType];
+    var buttonColors = _ButtonColors.ButtonColors[variant];
     if (buttonColors == null) {
@@ -254,26 +254,24 @@ return {};
         }, buttonColors.labelDataDisabled && (_e = {}, _e['.' + labelDataBaseStyles.classname] = { color: buttonColors.labelDataDisabled }, _e)), '&:not([disabled])': {
-            '&:focus, &:active': __assign({ borderColor: buttonColors.focusBorder }, getButtonFocusRing(buttonType))
+            '&:focus, &:active': __assign({ borderColor: buttonColors.focusBorder }, getButtonFocusRing(variant))
         } });
 }
-function getButtonFocusRing(buttonType) {
-    var buttonColors = _ButtonColors.ButtonColors[buttonType];
+function getButtonFocusRing(variant) {
+    var buttonColors = _ButtonColors.ButtonColors[variant];
     if (buttonColors == null) {
         return {};
     }
-    switch (buttonType) {
-        case _types.ButtonTypes.Primary:
-        case _types.ButtonTypes.Secondary:
-        case _types.IconButtonTypes.Square:
-        case _types.IconButtonTypes.SquareFilled:
-        case _types.TextButtonTypes.Default:
-        case _types.TextButtonTypes.AllCaps:
+    switch (variant) {
+        case _types.ButtonVariant.Primary:
+        case _types.ButtonVariant.Secondary:
+        case _types.TextButtonVariant.Default:
+        case _types.TextButtonVariant.AllCaps:
             return (0, _canvasKitReactCommon.focusRing)(2, 0);
-        case _types.BetaButtonTypes.OutlineInverse:
+        case _types.BetaButtonVariant.OutlineInverse:
             return (0, _canvasKitReactCommon.focusRing)(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
-        case _types.IconButtonTypes.Plain:
+        case _types.IconButtonVariant.Plain:
             return (0, _canvasKitReactCommon.focusRing)(2);
-        case _types.IconButtonTypes.Inverse:
-        case _types.IconButtonTypes.InverseFilled:
-        case _types.TextButtonTypes.Inverse:
-        case _types.TextButtonTypes.InverseAllCaps:
+        case _types.IconButtonVariant.Inverse:
+        case _types.IconButtonVariant.InverseFilled:
+        case _types.TextButtonVariant.Inverse:
+        case _types.TextButtonVariant.InverseAllCaps:
             return (0, _canvasKitReactCommon.focusRing)(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
@@ -280,0 +278,0 @@ default:

dist/commonjs/lib/DropdownButton.d.ts

 import * as React from 'react';
 import { BaseButtonProps } from './Button';
-import { ButtonSizes, BetaButtonTypes } from './types';
+import { ButtonSize, BetaButtonVariant } from './types';
 export default class DropdownButton extends React.Component<BaseButtonProps> {
-    static Types: typeof BetaButtonTypes;
-    static Sizes: typeof ButtonSizes;
+    static Variant: typeof BetaButtonVariant;
+    static Size: typeof ButtonSize;
     static defaultProps: {
-        buttonType: BetaButtonTypes;
-        buttonSize: ButtonSizes;
+        variant: BetaButtonVariant;
+        size: ButtonSize;
     };
     render(): JSX.Element;
 }

dist/commonjs/lib/DropdownButton.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _isPropValid = require('@emotion/is-prop-valid');
+
+var _isPropValid2 = _interopRequireDefault(_isPropValid);
+
 var _ButtonStyles = require('./ButtonStyles');
@@ -55,11 +59,22 @@
 };
+var __rest = undefined && undefined.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
 
 var DropdownButtonCon = /*#__PURE__*/(0, _reactEmotion2.default)('button', {
+    shouldForwardProp: function (prop) {
+        return (0, _isPropValid2.default)(prop) && prop !== 'size';
+    },
     target: 'eaooou70'
 })(_ButtonStyles.dropdownButtonStyles.styles, function (_a) {
-    var buttonType = _a.buttonType;
-    return (0, _ButtonBase.getButtonStyle)(_ButtonStyles.dropdownButtonStyles, buttonType);
+    var variant = _a.variant;
+    return (0, _ButtonBase.getButtonStyle)(_ButtonStyles.dropdownButtonStyles, variant);
 }, function (_a) {
-    var buttonSize = _a.buttonSize;
-    return (0, _ButtonBase.getButtonSize)(_ButtonStyles.dropdownButtonStyles, buttonSize);
+    var size = _a.size;
+    return (0, _ButtonBase.getButtonSize)(_ButtonStyles.dropdownButtonStyles, size);
 });
@@ -72,10 +87,17 @@ var DropdownButton = function (_super) {
     DropdownButton.prototype.render = function () {
-        var children = this.props.children;
-        return React.createElement(DropdownButtonCon, __assign({}, this.props), React.createElement(_ButtonBase.ButtonBaseLabel, __assign({}, this.props), children), React.createElement(_ButtonBase.ButtonLabelIcon, __assign({ icon: _canvasSystemIconsWeb.caretDownIcon }, this.props, { dropdown: true })));
+        var _a = this.props,
+            variant = _a.variant,
+            size = _a.size,
+            buttonRef = _a.buttonRef,
+            dataLabel = _a.dataLabel,
+            icon = _a.icon,
+            children = _a.children,
+            elemProps = __rest(_a, ["variant", "size", "buttonRef", "dataLabel", "icon", "children"]);
+        return React.createElement(DropdownButtonCon, __assign({ variant: variant, size: size, innerRef: buttonRef }, elemProps), React.createElement(_ButtonBase.ButtonBaseLabel, { variant: variant, size: size }, children), React.createElement(_ButtonBase.ButtonLabelIcon, { size: size, icon: _canvasSystemIconsWeb.caretDownIcon, dropdown: true }));
     };
-    DropdownButton.Types = _types.BetaButtonTypes;
-    DropdownButton.Sizes = _types.ButtonSizes;
+    DropdownButton.Variant = _types.BetaButtonVariant;
+    DropdownButton.Size = _types.ButtonSize;
     DropdownButton.defaultProps = {
-        buttonType: _types.BetaButtonTypes.Primary,
-        buttonSize: _types.ButtonSizes.Large
+        variant: _types.BetaButtonVariant.Primary,
+        size: _types.ButtonSize.Large
     };
@@ -82,0 +104,0 @@ return DropdownButton;

dist/commonjs/lib/IconButton.d.ts

 import * as React from 'react';
-import { IconButtonTypes, ButtonSizes } from './types';
-import { BaseButtonProps } from './Button';
-export interface IconButtonProps extends Partial<BaseButtonProps<IconButtonTypes>> {
-    toggled: boolean;
-    buttonSize?: ButtonSizes.Small | ButtonSizes.Medium;
+import { IconButtonVariant, IconButtonSize } from './types';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant: IconButtonVariant;
+    'aria-label': string;
+    size?: IconButtonSize;
+    toggled?: boolean;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    icon?: CanvasSystemIcon;
     onToggleChange?: (toggled: boolean | undefined) => void;
@@ -11,7 +15,7 @@ }
 export default class IconButton extends React.Component<IconButtonProps> {
-    static Types: typeof IconButtonTypes;
-    static Sizes: typeof ButtonSizes;
+    static Variant: typeof IconButtonVariant;
+    static Size: typeof IconButtonSize;
     static defaultProps: {
-        buttonType: IconButtonTypes;
-        toggled: undefined;
+        readonly variant: IconButtonVariant.Circle;
+        readonly size: IconButtonSize.Medium;
     };
@@ -18,0 +22,0 @@ componentDidUpdate(prevProps: IconButtonProps): void;

dist/commonjs/lib/IconButton.js

@@ -18,2 +18,6 @@ 'use strict';
 
+var _isPropValid = require('@emotion/is-prop-valid');
+
+var _isPropValid2 = _interopRequireDefault(_isPropValid);
+
 var _types = require('./types');
@@ -69,36 +73,21 @@
 var IconButtonCon = /*#__PURE__*/exports.IconButtonCon = (0, _reactEmotion2.default)('button', {
+    shouldForwardProp: function (prop) {
+        return (0, _isPropValid2.default)(prop) && prop !== 'size';
+    },
     target: 'e7hqos50'
 })(_ButtonStyles.iconButtonStyles.styles, function (_a) {
-    var buttonType = _a.buttonType;
-    return (0, _ButtonBase.getButtonStyle)(_ButtonStyles.iconButtonStyles, buttonType);
+    var variant = _a.variant;
+    return (0, _ButtonBase.getButtonStyle)(_ButtonStyles.iconButtonStyles, variant);
 }, function (_a) {
-    var buttonSize = _a.buttonSize,
-        buttonType = _a.buttonType;
-    if (buttonType === _types.IconButtonTypes.Square || buttonType === _types.IconButtonTypes.SquareFilled) {
-        switch (buttonSize) {
-            case _types.ButtonSizes.Medium:
-                return _ButtonStyles.iconButtonStyles.variants.sizes.medium;
-            default:
-            case _types.ButtonSizes.Small:
-                return {};
-        }
-    } else if (buttonType === _types.IconButtonTypes.Plain) {
-        switch (buttonSize) {
-            default:
-            case _types.ButtonSizes.Medium:
-                return __assign({ margin: '-8px' }, _ButtonStyles.iconButtonStyles.variants.sizes.medium);
-            case _types.ButtonSizes.Small:
-                return __assign({ margin: '-6px' }, _ButtonStyles.iconButtonStyles.variants.sizes.small);
-        }
-    } else {
-        switch (buttonSize) {
-            default:
-            case _types.ButtonSizes.Medium:
-                return _ButtonStyles.iconButtonStyles.variants.sizes.medium;
-            case _types.ButtonSizes.Small:
-                return _ButtonStyles.iconButtonStyles.variants.sizes.small;
-        }
+    var size = _a.size,
+        variant = _a.variant;
+    switch (size) {
+        default:
+        case _types.IconButtonSize.Medium:
+            return __assign({ margin: variant === _types.IconButtonVariant.Plain ? '-8px' : undefined }, _ButtonStyles.iconButtonStyles.variants.sizes.medium);
+        case _types.IconButtonSize.Small:
+            return __assign({ margin: variant === _types.IconButtonVariant.Plain ? '-6px' : undefined }, _ButtonStyles.iconButtonStyles.variants.sizes.small);
     }
 }, function (_a) {
-    var buttonType = _a.buttonType,
+    var variant = _a.variant,
         toggled = _a.toggled;
@@ -108,4 +97,4 @@ if (!toggled) {
     }
-    switch (buttonType) {
-        case _types.IconButtonTypes.SquareFilled:
+    switch (variant) {
+        case _types.IconButtonVariant.SquareFilled:
         default:
@@ -115,15 +104,15 @@ return __assign({ '&:focus&:hover, &:focus, &:active': __assign({ backgroundColor: _canvasKitReactCore.colors.blueberry400 }, getFillSelector(_canvasKitReactCore.colors.frenchVanilla100), getAccentSelector(_canvasKitReactCore.colors.frenchVanilla100)), '&:not([disabled]):focus': __assign({}, toggled ? (0, _canvasKitReactCommon.focusRing)(2, 2) : {}), '&:hover': {
                 }, backgroundColor: _canvasKitReactCore.colors.blueberry400, borderColor: _canvasKitReactCore.colors.blueberry400 }, getFillSelector(_canvasKitReactCore.colors.frenchVanilla100), getAccentSelector(_canvasKitReactCore.colors.frenchVanilla100));
-        case _types.IconButtonTypes.Square:
+        case _types.IconButtonVariant.Square:
             return __assign({ '&:focus:hover, &:focus, &:active': __assign({ backgroundColor: 'transparent' }, getFillSelector(_canvasKitReactCore.colors.blueberry400), getAccentSelector(_canvasKitReactCore.colors.blueberry400)), '&:not([disabled]):focus': __assign({}, toggled ? (0, _canvasKitReactCommon.focusRing)(2, 0) : {}), '&:hover, &:focus:hover': {
                     backgroundColor: _canvasKitReactCore.colors.soap300
                 }, backgroundColor: _canvasKitReactCore.colors.frenchVanilla100 }, getFillSelector(_canvasKitReactCore.colors.blueberry400), getAccentSelector(_canvasKitReactCore.colors.blueberry400));
-        case _types.IconButtonTypes.Circle:
+        case _types.IconButtonVariant.Circle:
             return __assign({ '&:active': __assign({}, getFillSelector(_canvasKitReactCore.colors.blueberry400), getAccentSelector(_canvasKitReactCore.colors.frenchVanilla100)) }, getBackgroundSelector(_canvasKitReactCore.colors.blueberry400), getFillSelector(_canvasKitReactCore.colors.blueberry400), getAccentSelector(_canvasKitReactCore.colors.frenchVanilla100));
-        case _types.IconButtonTypes.CircleFilled:
+        case _types.IconButtonVariant.CircleFilled:
             return __assign({ backgroundColor: _canvasKitReactCore.colors.blueberry400, '&:hover, &:focus&:hover': __assign({ backgroundColor: _canvasKitReactCore.colors.blueberry500 }, getAccentSelector(_canvasKitReactCore.colors.blueberry500)) }, getBackgroundSelector(_canvasKitReactCore.colors.frenchVanilla100), getFillSelector(_canvasKitReactCore.colors.frenchVanilla100), getAccentSelector(_canvasKitReactCore.colors.blueberry400));
-        case _types.IconButtonTypes.Inverse:
+        case _types.IconButtonVariant.Inverse:
             return __assign({ '&:hover span .wd-icon-fill, span .wd-icon-fill': {
                     fill: _canvasKitReactCore.colors.frenchVanilla100
                 } }, getBackgroundSelector(_canvasKitReactCore.colors.frenchVanilla100), getAccentSelector(_canvasKitReactCore.colors.licorice200));
-        case _types.IconButtonTypes.InverseFilled:
+        case _types.IconButtonVariant.InverseFilled:
             return __assign({ backgroundColor: 'rgba(0, 0, 0, 0.4)', '&:focus': {
@@ -168,13 +157,16 @@ backgroundColor: 'rgba(0, 0, 0, 0.4)'
             buttonRef = _a.buttonRef,
-            buttonSize = _a.buttonSize,
+            size = _a.size,
+            variant = _a.variant,
             onToggleChange = _a.onToggleChange,
+            icon = _a.icon,
             toggled = _a.toggled,
-            elemProps = __rest(_a, ["buttonRef", "buttonSize", "onToggleChange", "toggled"]);
-        return React.createElement(IconButtonCon, __assign({ toggled: toggled, innerRef: buttonRef, buttonSize: buttonSize }, elemProps, { "aria-pressed": this.props.toggled }), this.props.icon ? React.createElement(_canvasKitReactIcon.SystemIcon, { icon: this.props.icon }) : this.props.children);
+            children = _a.children,
+            elemProps = __rest(_a, ["buttonRef", "size", "variant", "onToggleChange", "icon", "toggled", "children"]);
+        return React.createElement(IconButtonCon, __assign({ toggled: toggled, innerRef: buttonRef, variant: variant, size: size, "aria-pressed": toggled }, elemProps), icon ? React.createElement(_canvasKitReactIcon.SystemIcon, { icon: icon }) : children);
     };
-    IconButton.Types = _types.IconButtonTypes;
-    IconButton.Sizes = _types.ButtonSizes;
+    IconButton.Variant = _types.IconButtonVariant;
+    IconButton.Size = _types.IconButtonSize;
     IconButton.defaultProps = {
-        buttonType: _types.IconButtonTypes.Circle,
-        toggled: undefined
+        variant: _types.IconButtonVariant.Circle,
+        size: _types.IconButtonSize.Medium
     };
@@ -181,0 +173,0 @@ return IconButton;

dist/commonjs/lib/IconButtonToggleGroup.js

@@ -76,3 +76,3 @@ 'use strict';
                     toggled: toggled,
-                    buttonType: _IconButton2.default.Types.SquareFilled,
+                    variant: _IconButton2.default.Variant.SquareFilled,
                     onClick: _this.onButtonClick.bind(_this, childProps.onClick, index)
@@ -79,0 +79,0 @@ });

dist/commonjs/lib/TextButton.d.ts

 import * as React from 'react';
-import { ButtonSizes, IconPositions, TextButtonTypes } from './types';
+import { ButtonSize, IconPosition, TextButtonVariant } from './types';
 import { BaseButtonProps } from './Button';
-export interface TextButtonProps extends BaseButtonProps<TextButtonTypes> {
-    iconPosition?: IconPositions;
+export interface TextButtonProps extends BaseButtonProps<TextButtonVariant> {
+    iconPosition?: IconPosition;
 }
 export default class TextButton extends React.Component<TextButtonProps> {
-    static IconPositions: typeof IconPositions;
-    static Types: typeof TextButtonTypes;
-    static Sizes: typeof ButtonSizes;
+    static IconPosition: typeof IconPosition;
+    static Variant: typeof TextButtonVariant;
+    static Size: typeof ButtonSize;
     static defaultProps: {
-        iconPosition: IconPositions;
-        buttonType: TextButtonTypes;
-        buttonSize: ButtonSizes;
+        iconPosition: IconPosition;
+        variant: TextButtonVariant;
+        size: ButtonSize;
     };
     render(): JSX.Element;
 }

dist/commonjs/lib/TextButton.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _isPropValid = require('@emotion/is-prop-valid');
+
+var _isPropValid2 = _interopRequireDefault(_isPropValid);
+
 var _types = require('./types');
@@ -63,15 +67,18 @@
 var TextButtonCon = /*#__PURE__*/(0, _reactEmotion2.default)('button', {
+    shouldForwardProp: function (prop) {
+        return (0, _isPropValid2.default)(prop) && prop !== 'size';
+    },
     target: 'ecfc8xq0'
 })(_ButtonStyles.textButtonStyles.styles, function (_a) {
-    var buttonType = _a.buttonType;
-    return (0, _ButtonBase.getButtonStyle)(_ButtonStyles.textButtonStyles, buttonType);
+    var variant = _a.variant;
+    return (0, _ButtonBase.getButtonStyle)(_ButtonStyles.textButtonStyles, variant);
 }, function (_a) {
-    var buttonSize = _a.buttonSize;
+    var size = _a.size;
     var sizes = _ButtonStyles.textButtonStyles.variants.sizes;
-    switch (buttonSize) {
-        case _types.ButtonSizes.Large:
+    switch (size) {
+        case _types.ButtonSize.Large:
         default:
             return sizes.large;
-        case _types.ButtonSizes.Medium:
-        case _types.ButtonSizes.Small:
+        case _types.ButtonSize.Medium:
+        case _types.ButtonSize.Small:
             return sizes.small;
@@ -90,12 +97,16 @@ }
             children = _a.children,
-            elemProps = __rest(_a, ["buttonRef", "onClick", "children"]);
-        return React.createElement(TextButtonCon, __assign({ onClick: onClick, innerRef: buttonRef }, elemProps), elemProps.icon && elemProps.iconPosition === _types.IconPositions.Left && React.createElement(_ButtonBase.ButtonLabelIcon, __assign({}, elemProps)), React.createElement(_ButtonBase.ButtonBaseLabel, __assign({}, elemProps), children), elemProps.icon && elemProps.iconPosition === _types.IconPositions.Right && React.createElement(_ButtonBase.ButtonLabelIcon, __assign({}, elemProps)));
+            iconPosition = _a.iconPosition,
+            size = _a.size,
+            variant = _a.variant,
+            icon = _a.icon,
+            elemProps = __rest(_a, ["buttonRef", "onClick", "children", "iconPosition", "size", "variant", "icon"]);
+        return React.createElement(TextButtonCon, __assign({ onClick: onClick, innerRef: buttonRef, size: size, variant: variant }, elemProps), icon && iconPosition === _types.IconPosition.Left && React.createElement(_ButtonBase.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }), React.createElement(_ButtonBase.ButtonBaseLabel, { size: size, variant: variant }, children), icon && iconPosition === _types.IconPosition.Right && React.createElement(_ButtonBase.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }));
     };
-    TextButton.IconPositions = _types.IconPositions;
-    TextButton.Types = _types.TextButtonTypes;
-    TextButton.Sizes = _types.ButtonSizes;
+    TextButton.IconPosition = _types.IconPosition;
+    TextButton.Variant = _types.TextButtonVariant;
+    TextButton.Size = _types.ButtonSize;
     TextButton.defaultProps = {
-        iconPosition: _types.IconPositions.Left,
-        buttonType: _types.TextButtonTypes.Default,
-        buttonSize: _types.ButtonSizes.Large
+        iconPosition: _types.IconPosition.Left,
+        variant: _types.TextButtonVariant.Default,
+        size: _types.ButtonSize.Large
     };
@@ -102,0 +113,0 @@ return TextButton;

dist/commonjs/lib/types.d.ts

@@ -1,2 +0,2 @@
-export declare enum ButtonSizes {
+export declare enum ButtonSize {
     Small = "small",
@@ -6,3 +6,7 @@ Medium = "medium",
 }
-export declare enum ButtonTypes {
+export declare enum IconButtonSize {
+    Small = "small",
+    Medium = "medium"
+}
+export declare enum ButtonVariant {
     Primary = "primary",
@@ -12,3 +16,3 @@ Secondary = "secondary",
 }
-export declare enum BetaButtonTypes {
+export declare enum BetaButtonVariant {
     Primary = "betaPrimary",
@@ -22,3 +26,3 @@ Secondary = "betaSecondary",
 }
-export declare enum IconButtonTypes {
+export declare enum IconButtonVariant {
     Square = "square",
@@ -32,7 +36,7 @@ SquareFilled = "squareFilled",
 }
-export declare enum IconPositions {
+export declare enum IconPosition {
     Left = "iconPositionLeft",
     Right = "iconPositionRight"
 }
-export declare enum TextButtonTypes {
+export declare enum TextButtonVariant {
     Default = "text",
@@ -43,2 +47,2 @@ Inverse = "textInverse",
 }
-export declare type AllButtonTypes = ButtonTypes | BetaButtonTypes | TextButtonTypes | IconButtonTypes;
+export declare type AllButtonVariants = ButtonVariant | BetaButtonVariant | TextButtonVariant | IconButtonVariant;

dist/commonjs/lib/types.js

@@ -6,45 +6,50 @@ "use strict";
 });
-var ButtonSizes = exports.ButtonSizes = undefined;
-(function (ButtonSizes) {
-    ButtonSizes["Small"] = "small";
-    ButtonSizes["Medium"] = "medium";
-    ButtonSizes["Large"] = "large";
-})(ButtonSizes || (exports.ButtonSizes = ButtonSizes = {}));
-var ButtonTypes = exports.ButtonTypes = undefined;
-(function (ButtonTypes) {
-    ButtonTypes["Primary"] = "primary";
-    ButtonTypes["Secondary"] = "secondary";
-    ButtonTypes["Delete"] = "delete";
-})(ButtonTypes || (exports.ButtonTypes = ButtonTypes = {}));
-var BetaButtonTypes = exports.BetaButtonTypes = undefined;
-(function (BetaButtonTypes) {
-    BetaButtonTypes["Primary"] = "betaPrimary";
-    BetaButtonTypes["Secondary"] = "betaSecondary";
-    BetaButtonTypes["Delete"] = "betaDelete";
-    BetaButtonTypes["Highlight"] = "highlight";
-    BetaButtonTypes["OutlinePrimary"] = "outlinePrimary";
-    BetaButtonTypes["OutlineSecondary"] = "outlineSecondary";
-    BetaButtonTypes["OutlineInverse"] = "outlineInverse";
-})(BetaButtonTypes || (exports.BetaButtonTypes = BetaButtonTypes = {}));
-var IconButtonTypes = exports.IconButtonTypes = undefined;
-(function (IconButtonTypes) {
-    IconButtonTypes["Square"] = "square";
-    IconButtonTypes["SquareFilled"] = "squareFilled";
-    IconButtonTypes["Plain"] = "plain";
-    IconButtonTypes["Circle"] = "circle";
-    IconButtonTypes["CircleFilled"] = "circleFilled";
-    IconButtonTypes["Inverse"] = "inverse";
-    IconButtonTypes["InverseFilled"] = "inverseFilled";
-})(IconButtonTypes || (exports.IconButtonTypes = IconButtonTypes = {}));
-var IconPositions = exports.IconPositions = undefined;
-(function (IconPositions) {
-    IconPositions["Left"] = "iconPositionLeft";
-    IconPositions["Right"] = "iconPositionRight";
-})(IconPositions || (exports.IconPositions = IconPositions = {}));
-var TextButtonTypes = exports.TextButtonTypes = undefined;
-(function (TextButtonTypes) {
-    TextButtonTypes["Default"] = "text";
-    TextButtonTypes["Inverse"] = "textInverse";
-    TextButtonTypes["AllCaps"] = "textAllCaps";
-    TextButtonTypes["InverseAllCaps"] = "textInverseAllCaps";
-})(TextButtonTypes || (exports.TextButtonTypes = TextButtonTypes = {}));
+var ButtonSize = exports.ButtonSize = undefined;
+(function (ButtonSize) {
+    ButtonSize["Small"] = "small";
+    ButtonSize["Medium"] = "medium";
+    ButtonSize["Large"] = "large";
+})(ButtonSize || (exports.ButtonSize = ButtonSize = {}));
+var IconButtonSize = exports.IconButtonSize = undefined;
+(function (IconButtonSize) {
+    IconButtonSize["Small"] = "small";
+    IconButtonSize["Medium"] = "medium";
+})(IconButtonSize || (exports.IconButtonSize = IconButtonSize = {}));
+var ButtonVariant = exports.ButtonVariant = undefined;
+(function (ButtonVariant) {
+    ButtonVariant["Primary"] = "primary";
+    ButtonVariant["Secondary"] = "secondary";
+    ButtonVariant["Delete"] = "delete";
+})(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
+var BetaButtonVariant = exports.BetaButtonVariant = undefined;
+(function (BetaButtonVariant) {
+    BetaButtonVariant["Primary"] = "betaPrimary";
+    BetaButtonVariant["Secondary"] = "betaSecondary";
+    BetaButtonVariant["Delete"] = "betaDelete";
+    BetaButtonVariant["Highlight"] = "highlight";
+    BetaButtonVariant["OutlinePrimary"] = "outlinePrimary";
+    BetaButtonVariant["OutlineSecondary"] = "outlineSecondary";
+    BetaButtonVariant["OutlineInverse"] = "outlineInverse";
+})(BetaButtonVariant || (exports.BetaButtonVariant = BetaButtonVariant = {}));
+var IconButtonVariant = exports.IconButtonVariant = undefined;
+(function (IconButtonVariant) {
+    IconButtonVariant["Square"] = "square";
+    IconButtonVariant["SquareFilled"] = "squareFilled";
+    IconButtonVariant["Plain"] = "plain";
+    IconButtonVariant["Circle"] = "circle";
+    IconButtonVariant["CircleFilled"] = "circleFilled";
+    IconButtonVariant["Inverse"] = "inverse";
+    IconButtonVariant["InverseFilled"] = "inverseFilled";
+})(IconButtonVariant || (exports.IconButtonVariant = IconButtonVariant = {}));
+var IconPosition = exports.IconPosition = undefined;
+(function (IconPosition) {
+    IconPosition["Left"] = "iconPositionLeft";
+    IconPosition["Right"] = "iconPositionRight";
+})(IconPosition || (exports.IconPosition = IconPosition = {}));
+var TextButtonVariant = exports.TextButtonVariant = undefined;
+(function (TextButtonVariant) {
+    TextButtonVariant["Default"] = "text";
+    TextButtonVariant["Inverse"] = "textInverse";
+    TextButtonVariant["AllCaps"] = "textAllCaps";
+    TextButtonVariant["InverseAllCaps"] = "textInverseAllCaps";
+})(TextButtonVariant || (exports.TextButtonVariant = TextButtonVariant = {}));

dist/es6/lib/Button.d.ts

 import * as React from 'react';
-import { ButtonTypes, ButtonSizes, BetaButtonTypes } from './types';
+import { ButtonVariant, ButtonSize, BetaButtonVariant } from './types';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { GrowthBehavior } from '@workday/canvas-kit-react-common';
-export interface BaseButtonProps<T = ButtonTypes | BetaButtonTypes> extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    buttonType?: T;
-    buttonSize?: ButtonSizes;
+export interface BaseButtonProps<T = ButtonVariant | BetaButtonVariant> extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: T;
+    size?: ButtonSize;
     buttonRef?: React.Ref<HTMLButtonElement>;
@@ -12,11 +12,11 @@ dataLabel?: String;
 }
-export interface ButtonProps<T = ButtonTypes | BetaButtonTypes> extends BaseButtonProps<T>, GrowthBehavior {
+export interface ButtonProps<T = ButtonVariant | BetaButtonVariant> extends BaseButtonProps<T>, GrowthBehavior {
     children: React.ReactNode;
 }
 export default class Button extends React.Component<ButtonProps> {
-    static Types: typeof ButtonTypes;
-    static Sizes: typeof ButtonSizes;
+    static Variant: typeof ButtonVariant;
+    static Size: typeof ButtonSize;
     static defaultProps: {
-        buttonSize: ButtonSizes;
-        buttonType: ButtonTypes;
+        size: ButtonSize;
+        variant: ButtonVariant;
         grow: boolean;
@@ -26,8 +26,8 @@ };
 }
-export declare class beta_Button extends React.Component<ButtonProps<BetaButtonTypes>> {
-    static Types: typeof BetaButtonTypes;
-    static Sizes: typeof ButtonSizes;
+export declare class beta_Button extends React.Component<ButtonProps<BetaButtonVariant>> {
+    static Variant: typeof BetaButtonVariant;
+    static Size: typeof ButtonSize;
     static defaultProps: {
-        buttonSize: ButtonSizes;
-        buttonType: BetaButtonTypes;
+        size: ButtonSize;
+        variant: BetaButtonVariant;
         grow: boolean;
@@ -34,0 +34,0 @@ };

dist/es6/lib/Button.js

@@ -38,3 +38,3 @@ var __extends = this && this.__extends || function () {
 import { ButtonBaseCon, ButtonBaseLabel, ButtonLabelData, ButtonLabelIcon } from './ButtonBase';
-import { ButtonTypes, ButtonSizes, BetaButtonTypes } from './types';
+import { ButtonVariant, ButtonSize, BetaButtonVariant } from './types';
 import { labelDataBaseStyles } from './ButtonStyles';
@@ -48,11 +48,16 @@ var Button = function (_super) {
         var _a = this.props,
+            variant = _a.variant,
+            size = _a.size,
             buttonRef = _a.buttonRef,
-            elemProps = __rest(_a, ["buttonRef"]);
-        return React.createElement(ButtonBaseCon, __assign({}, elemProps, { innerRef: buttonRef }), elemProps.icon && React.createElement(ButtonLabelIcon, __assign({}, elemProps)), React.createElement(ButtonBaseLabel, { buttonSize: elemProps.buttonSize, buttonType: elemProps.buttonType }, elemProps.children), elemProps.dataLabel && React.createElement(ButtonLabelData, __assign({ className: labelDataBaseStyles.classname }, elemProps), elemProps.dataLabel));
+            dataLabel = _a.dataLabel,
+            icon = _a.icon,
+            children = _a.children,
+            elemProps = __rest(_a, ["variant", "size", "buttonRef", "dataLabel", "icon", "children"]);
+        return React.createElement(ButtonBaseCon, __assign({ variant: variant, size: size, innerRef: buttonRef }, elemProps), icon && React.createElement(ButtonLabelIcon, { size: size, icon: icon }), React.createElement(ButtonBaseLabel, { size: size, variant: variant }, children), dataLabel && React.createElement(ButtonLabelData, { size: size, className: labelDataBaseStyles.classname }, dataLabel));
     };
-    Button.Types = ButtonTypes;
-    Button.Sizes = ButtonSizes;
+    Button.Variant = ButtonVariant;
+    Button.Size = ButtonSize;
     Button.defaultProps = {
-        buttonSize: ButtonSizes.Large,
-        buttonType: ButtonTypes.Secondary,
+        size: ButtonSize.Large,
+        variant: ButtonVariant.Secondary,
         grow: false
@@ -69,3 +74,7 @@ };
     beta_Button.prototype.render = function () {
-        if (this.props.buttonType === BetaButtonTypes.Highlight && (this.props.icon === undefined || this.props.buttonSize === ButtonSizes.Small)) {
+        var _a = this.props,
+            variant = _a.variant,
+            size = _a.size,
+            icon = _a.icon;
+        if (variant === BetaButtonVariant.Highlight && (icon === undefined || size === ButtonSize.Small)) {
             return null;
@@ -75,7 +84,7 @@ }
     };
-    beta_Button.Types = BetaButtonTypes;
-    beta_Button.Sizes = ButtonSizes;
+    beta_Button.Variant = BetaButtonVariant;
+    beta_Button.Size = ButtonSize;
     beta_Button.defaultProps = {
-        buttonSize: ButtonSizes.Medium,
-        buttonType: BetaButtonTypes.Secondary,
+        size: ButtonSize.Medium,
+        variant: BetaButtonVariant.Secondary,
         grow: false
@@ -82,0 +91,0 @@ };

dist/es6/lib/ButtonBase.d.ts

 import * as React from 'react';
-import { ButtonSizes, ButtonTypes, AllButtonTypes, BetaButtonTypes } from './types';
+import { ButtonSize, ButtonVariant, IconPosition, AllButtonVariants, BetaButtonVariant } from './types';
 import { ButtonProps, BaseButtonProps } from './Button';
 import * as ButtonStyles from './ButtonStyles';
-export declare const ButtonBaseCon: import("create-emotion-styled").StyledOtherComponent<ButtonProps<ButtonTypes | BetaButtonTypes>, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, any>;
-export declare const ButtonBaseLabel: import("create-emotion-styled").StyledOtherComponent<ButtonProps<AllButtonTypes>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>;
-export declare const ButtonLabelData: import("create-emotion-styled").StyledOtherComponent<ButtonProps<ButtonTypes | BetaButtonTypes>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>;
-export interface ButtonLabelIconProps extends BaseButtonProps<AllButtonTypes> {
+export declare const ButtonBaseCon: import("create-emotion-styled").StyledOtherComponent<ButtonProps<ButtonVariant | BetaButtonVariant>, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, any>;
+export declare const ButtonBaseLabel: import("create-emotion-styled").StyledOtherComponent<ButtonProps<AllButtonVariants>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>;
+export declare const ButtonLabelData: import("create-emotion-styled").StyledOtherComponent<ButtonProps<ButtonVariant | BetaButtonVariant>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>;
+export interface ButtonLabelIconProps extends BaseButtonProps<AllButtonVariants> {
+    iconPosition?: IconPosition;
     dropdown?: boolean;
@@ -14,3 +15,3 @@ }
 }
-export declare function getButtonSize(baseButton: ButtonStyles.ButtonGenericStyle, buttonSize?: ButtonSizes): import("create-emotion").CSSObject | undefined;
-export declare function getButtonStyle(baseButton: ButtonStyles.ButtonGenericStyle, buttonType?: AllButtonTypes): import("create-emotion").CSSObject | undefined;
+export declare function getButtonSize(baseButton: ButtonStyles.ButtonGenericStyle, size?: ButtonSize): import("create-emotion").CSSObject | undefined;
+export declare function getButtonStyle(baseButton: ButtonStyles.ButtonGenericStyle, variant?: AllButtonVariants): import("create-emotion").CSSObject | undefined;

dist/es6/lib/ButtonBase.js

@@ -28,19 +28,31 @@ var __extends = this && this.__extends || function () {
 };
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
 import * as React from 'react';
 import styled from 'react-emotion';
-import { ButtonSizes, ButtonTypes, IconPositions, TextButtonTypes, BetaButtonTypes, IconButtonTypes } from './types';
+import isPropValid from '@emotion/is-prop-valid';
+import { ButtonSize, ButtonVariant, IconPosition, TextButtonVariant, BetaButtonVariant, IconButtonVariant } from './types';
 import { SystemIcon } from '@workday/canvas-kit-react-icon';
 import * as ButtonStyles from './ButtonStyles';
 export var ButtonBaseCon = /*#__PURE__*/styled('button', {
+    shouldForwardProp: function (prop) {
+        return isPropValid(prop) && prop !== 'size';
+    },
     target: 'ee73cc40'
 })(function (_a) {
-    var buttonType = _a.buttonType,
-        buttonSize = _a.buttonSize;
-    if (buttonType === undefined) {
+    var variant = _a.variant,
+        size = _a.size;
+    if (variant === undefined) {
         return {};
     }
-    var baseButton = getBaseButton(buttonType);
-    var buttonStyles = getButtonStyle(baseButton, buttonType);
-    var buttonSizeStyles = buttonSize !== undefined ? getButtonSize(baseButton, buttonSize) : {};
-    return __assign({}, baseButton.styles, buttonStyles, buttonSizeStyles);
+    var baseButton = getBaseButton(variant);
+    var buttonStyles = getButtonStyle(baseButton, variant);
+    var sizeStyles = size !== undefined ? getButtonSize(baseButton, size) : {};
+    return __assign({}, baseButton.styles, buttonStyles, sizeStyles);
 }, function (_a) {
@@ -51,30 +63,33 @@ var grow = _a.grow;
 export var ButtonBaseLabel = /*#__PURE__*/styled('span', {
+    shouldForwardProp: function (prop) {
+        return isPropValid(prop) && prop !== 'size';
+    },
     target: 'ee73cc41'
 })(ButtonStyles.labelBaseStyles.styles, function (_a) {
-    var buttonSize = _a.buttonSize;
+    var size = _a.size;
     var sizes = ButtonStyles.labelBaseStyles.variants.sizes;
-    switch (buttonSize) {
-        case ButtonSizes.Large:
+    switch (size) {
+        case ButtonSize.Large:
         default:
             return sizes.large;
-        case ButtonSizes.Small:
+        case ButtonSize.Small:
             return sizes.small;
-        case ButtonSizes.Medium:
+        case ButtonSize.Medium:
             return sizes.medium;
     }
 }, function (_a) {
-    var buttonType = _a.buttonType;
+    var variant = _a.variant;
     var types = ButtonStyles.labelBaseStyles.variants.types;
-    switch (buttonType) {
-        case TextButtonTypes.Default:
-        case TextButtonTypes.Inverse:
+    switch (variant) {
+        case TextButtonVariant.Default:
+        case TextButtonVariant.Inverse:
             return types.text;
-        case TextButtonTypes.AllCaps:
-        case TextButtonTypes.InverseAllCaps:
+        case TextButtonVariant.AllCaps:
+        case TextButtonVariant.InverseAllCaps:
             return types.textAllCaps;
-        case ButtonTypes.Primary:
+        case ButtonVariant.Primary:
             return types.primary;
-        case ButtonTypes.Secondary:
+        case ButtonVariant.Secondary:
             return types.secondary;
-        case ButtonTypes.Delete:
+        case ButtonVariant.Delete:
             return types.delete;
@@ -86,11 +101,14 @@ default:
 export var ButtonLabelData = /*#__PURE__*/styled('span', {
+    shouldForwardProp: function (prop) {
+        return isPropValid(prop) && prop !== 'size';
+    },
     target: 'ee73cc42'
 })(ButtonStyles.labelDataBaseStyles.styles, function (_a) {
-    var buttonSize = _a.buttonSize;
+    var size = _a.size;
     var sizes = ButtonStyles.labelDataBaseStyles.variants.sizes;
-    switch (buttonSize) {
-        case ButtonSizes.Large:
+    switch (size) {
+        case ButtonSize.Large:
         default:
             return sizes.large;
-        case ButtonSizes.Medium:
+        case ButtonSize.Medium:
             return sizes.medium;
@@ -100,12 +118,15 @@ }
 var ButtonLabelIconStyled = /*#__PURE__*/styled('span', {
+    shouldForwardProp: function (prop) {
+        return isPropValid(prop) && prop !== 'size';
+    },
     target: 'ee73cc43'
 })(ButtonStyles.labelIconBaseStyles.styles, function (_a) {
-    var buttonSize = _a.buttonSize,
+    var size = _a.size,
         dropdown = _a.dropdown;
     if (dropdown) {
-        switch (buttonSize) {
-            case ButtonSizes.Large:
+        switch (size) {
+            case ButtonSize.Large:
             default:
                 return { padding: '0 8px 0 0' };
-            case ButtonSizes.Medium:
+            case ButtonSize.Medium:
                 return { padding: '0 4px 0 0' };
@@ -115,7 +136,7 @@ }
     var sizes = ButtonStyles.labelIconBaseStyles.variants.sizes;
-    switch (buttonSize) {
-        case ButtonSizes.Large:
+    switch (size) {
+        case ButtonSize.Large:
         default:
             return sizes.large;
-        case ButtonSizes.Medium:
+        case ButtonSize.Medium:
             return sizes.medium;
@@ -130,6 +151,6 @@ }
     switch (iconPosition) {
-        case IconPositions.Left:
+        case IconPosition.Left:
         default:
             return types.iconPositionLeft;
-        case IconPositions.Right:
+        case IconPosition.Right:
             return types.iconPositionRight;
@@ -144,10 +165,16 @@ }
     ButtonLabelIcon.prototype.render = function () {
-        if (this.props.icon === undefined) {
+        var _a = this.props,
+            icon = _a.icon,
+            size = _a.size,
+            dropdown = _a.dropdown,
+            iconPosition = _a.iconPosition,
+            elemProps = __rest(_a, ["icon", "size", "dropdown", "iconPosition"]);
+        if (icon === undefined) {
             return {};
         }
         var iconSize = 24;
-        if (this.props.buttonSize === ButtonSizes.Small) {
+        if (size === ButtonSize.Small) {
             iconSize = 20;
         }
-        return React.createElement(ButtonLabelIconStyled, __assign({}, this.props), React.createElement(SystemIcon, { size: iconSize, icon: this.props.icon }));
+        return React.createElement(ButtonLabelIconStyled, __assign({ iconPosition: iconPosition, dropdown: dropdown, size: size }, elemProps), React.createElement(SystemIcon, { size: iconSize, icon: icon }));
     };
@@ -157,78 +184,78 @@ return ButtonLabelIcon;
 export { ButtonLabelIcon };
-export function getButtonSize(baseButton, buttonSize) {
+export function getButtonSize(baseButton, size) {
     var sizes = baseButton.variants.sizes;
-    switch (buttonSize) {
-        case ButtonSizes.Large:
+    switch (size) {
+        case ButtonSize.Large:
             return sizes.large;
-        case ButtonSizes.Medium:
+        case ButtonSize.Medium:
         default:
             return sizes.medium;
-        case ButtonSizes.Small:
+        case ButtonSize.Small:
             return sizes.small;
     }
 }
-export function getButtonStyle(baseButton, buttonType) {
+export function getButtonStyle(baseButton, variant) {
     var types = baseButton.variants.types;
-    switch (buttonType) {
-        case ButtonTypes.Primary:
+    switch (variant) {
+        case ButtonVariant.Primary:
         default:
-            return types[ButtonTypes.Primary];
-        case ButtonTypes.Secondary:
-            return types[ButtonTypes.Secondary];
-        case ButtonTypes.Delete:
-            return types[ButtonTypes.Delete];
-        case BetaButtonTypes.Highlight:
-            return types[BetaButtonTypes.Highlight];
-        case BetaButtonTypes.OutlinePrimary:
-            return types[BetaButtonTypes.OutlinePrimary];
-        case BetaButtonTypes.OutlineSecondary:
-            return types[BetaButtonTypes.OutlineSecondary];
-        case BetaButtonTypes.OutlineInverse:
-            return types[BetaButtonTypes.OutlineInverse];
-        case BetaButtonTypes.Primary:
-            return types[BetaButtonTypes.Primary];
-        case BetaButtonTypes.Secondary:
-            return types[BetaButtonTypes.Secondary];
-        case BetaButtonTypes.Delete:
-            return types[BetaButtonTypes.Delete];
-        case TextButtonTypes.Default:
-            return types[TextButtonTypes.Default];
-        case TextButtonTypes.Inverse:
-            return types[TextButtonTypes.Inverse];
-        case TextButtonTypes.AllCaps:
-            return types[TextButtonTypes.AllCaps];
-        case TextButtonTypes.InverseAllCaps:
-            return types[TextButtonTypes.InverseAllCaps];
-        case IconButtonTypes.Square:
-            return types[IconButtonTypes.Square];
-        case IconButtonTypes.SquareFilled:
-            return types[IconButtonTypes.SquareFilled];
-        case IconButtonTypes.Plain:
-            return types[IconButtonTypes.Plain];
-        case IconButtonTypes.Circle:
-            return types[IconButtonTypes.Circle];
-        case IconButtonTypes.CircleFilled:
-            return types[IconButtonTypes.CircleFilled];
-        case IconButtonTypes.Inverse:
-            return types[IconButtonTypes.Inverse];
-        case IconButtonTypes.InverseFilled:
-            return types[IconButtonTypes.InverseFilled];
+            return types[ButtonVariant.Primary];
+        case ButtonVariant.Secondary:
+            return types[ButtonVariant.Secondary];
+        case ButtonVariant.Delete:
+            return types[ButtonVariant.Delete];
+        case BetaButtonVariant.Highlight:
+            return types[BetaButtonVariant.Highlight];
+        case BetaButtonVariant.OutlinePrimary:
+            return types[BetaButtonVariant.OutlinePrimary];
+        case BetaButtonVariant.OutlineSecondary:
+            return types[BetaButtonVariant.OutlineSecondary];
+        case BetaButtonVariant.OutlineInverse:
+            return types[BetaButtonVariant.OutlineInverse];
+        case BetaButtonVariant.Primary:
+            return types[BetaButtonVariant.Primary];
+        case BetaButtonVariant.Secondary:
+            return types[BetaButtonVariant.Secondary];
+        case BetaButtonVariant.Delete:
+            return types[BetaButtonVariant.Delete];
+        case TextButtonVariant.Default:
+            return types[TextButtonVariant.Default];
+        case TextButtonVariant.Inverse:
+            return types[TextButtonVariant.Inverse];
+        case TextButtonVariant.AllCaps:
+            return types[TextButtonVariant.AllCaps];
+        case TextButtonVariant.InverseAllCaps:
+            return types[TextButtonVariant.InverseAllCaps];
+        case IconButtonVariant.Square:
+            return types[IconButtonVariant.Square];
+        case IconButtonVariant.SquareFilled:
+            return types[IconButtonVariant.SquareFilled];
+        case IconButtonVariant.Plain:
+            return types[IconButtonVariant.Plain];
+        case IconButtonVariant.Circle:
+            return types[IconButtonVariant.Circle];
+        case IconButtonVariant.CircleFilled:
+            return types[IconButtonVariant.CircleFilled];
+        case IconButtonVariant.Inverse:
+            return types[IconButtonVariant.Inverse];
+        case IconButtonVariant.InverseFilled:
+            return types[IconButtonVariant.InverseFilled];
     }
 }
-function getBaseButton(buttonType) {
-    switch (buttonType) {
-        case ButtonTypes.Primary:
-        case ButtonTypes.Secondary:
-        case ButtonTypes.Delete:
+function getBaseButton(variant) {
+    switch (variant) {
+        case ButtonVariant.Primary:
+        case ButtonVariant.Secondary:
+        case ButtonVariant.Delete:
         default:
             return ButtonStyles.canvasButtonStyles;
-        case BetaButtonTypes.Primary:
-        case BetaButtonTypes.Secondary:
-        case BetaButtonTypes.Delete:
-        case BetaButtonTypes.Highlight:
-        case BetaButtonTypes.OutlinePrimary:
-        case BetaButtonTypes.OutlineSecondary:
-        case BetaButtonTypes.OutlineInverse:
+        case BetaButtonVariant.Primary:
+        case BetaButtonVariant.Secondary:
+        case BetaButtonVariant.Delete:
+        case BetaButtonVariant.Highlight:
+        case BetaButtonVariant.OutlinePrimary:
+        case BetaButtonVariant.OutlineSecondary:
+        case BetaButtonVariant.OutlineInverse:
             return ButtonStyles.betaButtonStyles;
     }
 }

dist/es6/lib/ButtonColors.d.ts

 import canvas from '@workday/canvas-kit-react-core';
-import { AllButtonTypes } from './types';
+import { AllButtonVariants } from './types';
 export interface CanvasButtonColors extends Partial<typeof canvas.buttonColors.secondary>, Partial<typeof canvas.buttonColors.primary>, Partial<typeof canvas.buttonColors.delete> {
@@ -20,5 +20,5 @@ }
 export declare type ButtonColorCollection = {
-    [key in AllButtonTypes]: GenericButtonColors | null;
+    [key in AllButtonVariants]: GenericButtonColors | null;
 };
 export declare const ButtonColors: ButtonColorCollection;
 export default ButtonColors;

dist/es6/lib/ButtonColors.js

 var _a;
 import canvas from '@workday/canvas-kit-react-core';
-import { ButtonTypes, TextButtonTypes, BetaButtonTypes, IconButtonTypes } from './types';
-export var ButtonColors = (_a = {}, _a[ButtonTypes.Primary] = canvas.buttonColors.primary, _a[ButtonTypes.Secondary] = canvas.buttonColors.secondary, _a[ButtonTypes.Delete] = canvas.buttonColors.delete, _a[BetaButtonTypes.Primary] = {
+import { ButtonVariant, TextButtonVariant, BetaButtonVariant, IconButtonVariant } from './types';
+export var ButtonColors = (_a = {}, _a[ButtonVariant.Primary] = canvas.buttonColors.primary, _a[ButtonVariant.Secondary] = canvas.buttonColors.secondary, _a[ButtonVariant.Delete] = canvas.buttonColors.delete, _a[BetaButtonVariant.Primary] = {
     background: canvas.colors.blueberry400,
@@ -25,3 +25,3 @@ border: 'transparent',
     labelIconDisabled: canvas.colors.frenchVanilla100
-}, _a[BetaButtonTypes.Secondary] = {
+}, _a[BetaButtonVariant.Secondary] = {
     background: canvas.colors.soap200,
@@ -49,3 +49,3 @@ border: 'transparent',
     labelDataDisabled: canvas.colors.licorice100
-}, _a[BetaButtonTypes.Delete] = {
+}, _a[BetaButtonVariant.Delete] = {
     background: canvas.colors.cinnamon500,
@@ -65,3 +65,3 @@ border: canvas.colors.cinnamon500,
     hoverText: canvas.colors.frenchVanilla100
-}, _a[BetaButtonTypes.Highlight] = {
+}, _a[BetaButtonVariant.Highlight] = {
     background: canvas.colors.soap200,
@@ -87,3 +87,3 @@ border: canvas.colors.soap200,
     labelIconDisabled: canvas.colors.soap600
-}, _a[BetaButtonTypes.OutlinePrimary] = {
+}, _a[BetaButtonVariant.OutlinePrimary] = {
     background: 'transparent',
@@ -109,3 +109,3 @@ border: canvas.colors.blueberry400,
     labelIconDisabled: canvas.colors.soap600
-}, _a[BetaButtonTypes.OutlineSecondary] = {
+}, _a[BetaButtonVariant.OutlineSecondary] = {
     background: 'transparent',
@@ -131,3 +131,3 @@ border: canvas.colors.soap500,
     labelIconDisabled: canvas.colors.soap600
-}, _a[BetaButtonTypes.OutlineInverse] = {
+}, _a[BetaButtonVariant.OutlineInverse] = {
     background: 'transparent',
@@ -159,3 +159,3 @@ border: canvas.colors.frenchVanilla100,
     labelDataDisabled: 'rgba(255, 255, 255, 0.75)'
-}, _a[TextButtonTypes.Default] = {
+}, _a[TextButtonVariant.Default] = {
     background: 'transparent',
@@ -179,3 +179,3 @@ border: 'transparent',
     labelIconDisabled: 'rgba(8, 117, 225, 0.5)'
-}, _a[TextButtonTypes.Inverse] = {
+}, _a[TextButtonVariant.Inverse] = {
     background: 'transparent',
@@ -200,3 +200,3 @@ border: 'transparent',
     labelIconDisabled: 'rgba(255, 255, 255, 0.5)'
-}, _a[TextButtonTypes.AllCaps] = null, _a[TextButtonTypes.InverseAllCaps] = null, _a[IconButtonTypes.Square] = {
+}, _a[TextButtonVariant.AllCaps] = null, _a[TextButtonVariant.InverseAllCaps] = null, _a[IconButtonVariant.Square] = {
     background: 'transparent',
@@ -212,3 +212,3 @@ activeBackground: canvas.colors.soap400,
     labelIconDisabled: canvas.colors.soap600
-}, _a[IconButtonTypes.SquareFilled] = {
+}, _a[IconButtonVariant.SquareFilled] = {
     background: canvas.colors.soap200,
@@ -223,3 +223,3 @@ border: canvas.colors.soap500,
     labelIconDisabled: canvas.colors.soap600
-}, _a[IconButtonTypes.Plain] = {
+}, _a[IconButtonVariant.Plain] = {
     background: 'transparent',
@@ -236,3 +236,3 @@ activeBackground: 'transparent',
     labelIconDisabled: canvas.colors.soap600
-}, _a[IconButtonTypes.Circle] = {
+}, _a[IconButtonVariant.Circle] = {
     background: 'transparent',
@@ -248,3 +248,3 @@ activeBackground: canvas.colors.soap400,
     labelIconDisabled: canvas.colors.soap600
-}, _a[IconButtonTypes.CircleFilled] = {
+}, _a[IconButtonVariant.CircleFilled] = {
     background: canvas.colors.soap200,
@@ -258,3 +258,3 @@ activeBackground: canvas.colors.soap500,
     labelIconDisabled: canvas.colors.soap600
-}, _a[IconButtonTypes.Inverse] = {
+}, _a[IconButtonVariant.Inverse] = {
     background: 'transparent',
@@ -268,3 +268,3 @@ activeBackground: 'rgba(0, 0, 0, 0.4)',
     focusRingOuter: canvas.colors.frenchVanilla100
-}, _a[IconButtonTypes.InverseFilled] = {
+}, _a[IconButtonVariant.InverseFilled] = {
     background: 'rgba(0, 0, 0, 0.2)',
@@ -271,0 +271,0 @@ activeBackground: 'rgba(0, 0, 0, 0.4)',

dist/es6/lib/ButtonStyles.d.ts

 import { GenericStyle } from '@workday/canvas-kit-react-common';
 import { CSSObject } from 'create-emotion';
-import { ButtonSizes, IconPositions, AllButtonTypes } from './types';
+import { ButtonSize, IconPosition, AllButtonVariants } from './types';
 export declare const CANVAS_BUTTON_HEIGHT_LARGE: number;
@@ -10,6 +10,6 @@ export declare const CANVAS_BUTTON_HEIGHT_MEDIUM: number;
         types: {
-            [key in AllButtonTypes | IconPositions]?: CSSObject;
+            [key in AllButtonVariants | IconPosition]?: CSSObject;
         };
         sizes: {
-            [key in ButtonSizes]?: CSSObject;
+            [key in ButtonSize]?: CSSObject;
         };
@@ -16,0 +16,0 @@ };

dist/es6/lib/ButtonStyles.js

@@ -14,3 +14,3 @@ var __assign = this && this.__assign || function () {
 import { focusRing } from '@workday/canvas-kit-react-common';
-import { ButtonTypes, ButtonSizes, IconPositions, TextButtonTypes, BetaButtonTypes, IconButtonTypes } from './types';
+import { ButtonVariant, ButtonSize, IconPosition, TextButtonVariant, BetaButtonVariant, IconButtonVariant } from './types';
 import { ButtonColors } from './ButtonColors';
@@ -36,13 +36,13 @@ export var CANVAS_BUTTON_HEIGHT_LARGE = 40;
     variants: {
-        types: (_a = {}, _a[TextButtonTypes.Default] = {
+        types: (_a = {}, _a[TextButtonVariant.Default] = {
             padding: '0'
-        }, _a[TextButtonTypes.AllCaps] = __assign({}, canvas.type.variant.caps, { fontSize: '14px', letterSpacing: '.5px', padding: '0' }), _a[ButtonTypes.Primary] = {
+        }, _a[TextButtonVariant.AllCaps] = __assign({}, canvas.type.variant.caps, { fontSize: '14px', letterSpacing: '.5px', padding: '0' }), _a[ButtonVariant.Primary] = {
             fontSize: 'inherit',
             fontWeight: 'inherit',
             padding: '0'
-        }, _a[ButtonTypes.Secondary] = {
+        }, _a[ButtonVariant.Secondary] = {
             fontSize: 'inherit',
             fontWeight: 'inherit',
             padding: '0'
-        }, _a[ButtonTypes.Delete] = {
+        }, _a[ButtonVariant.Delete] = {
             fontSize: 'inherit',
@@ -52,9 +52,9 @@ fontWeight: 'inherit',
         }, _a),
-        sizes: (_b = {}, _b[ButtonSizes.Large] = {
+        sizes: (_b = {}, _b[ButtonSize.Large] = {
             fontSize: '16px',
             padding: '0 12px'
-        }, _b[ButtonSizes.Medium] = {
+        }, _b[ButtonSize.Medium] = {
             fontSize: '14px',
             padding: '0 8px'
-        }, _b[ButtonSizes.Small] = {
+        }, _b[ButtonSize.Small] = {
             fontSize: '14px',
@@ -70,5 +70,5 @@ padding: '0'
         types: {},
-        sizes: (_c = {}, _c[ButtonSizes.Large] = {
+        sizes: (_c = {}, _c[ButtonSize.Large] = {
             paddingRight: '12px'
-        }, _c[ButtonSizes.Medium] = {
+        }, _c[ButtonSize.Medium] = {
             paddingRight: '8px',
@@ -85,10 +85,10 @@ fontSize: '14px'
     variants: {
-        types: (_d = {}, _d[IconPositions.Left] = {
+        types: (_d = {}, _d[IconPosition.Left] = {
             padding: '0 8px 0 0'
-        }, _d[IconPositions.Right] = {
+        }, _d[IconPosition.Right] = {
             padding: '0 0 0 8px'
         }, _d),
-        sizes: (_e = {}, _e[ButtonSizes.Large] = {
+        sizes: (_e = {}, _e[ButtonSize.Large] = {
             paddingLeft: '8px'
-        }, _e[ButtonSizes.Medium] = {
+        }, _e[ButtonSize.Medium] = {
             paddingLeft: '4px'
@@ -117,4 +117,4 @@ }, _e)
     variants: {
-        types: (_f = {}, _f[ButtonTypes.Primary] = __assign({}, getButtonStateStyle(ButtonTypes.Primary)), _f[ButtonTypes.Secondary] = __assign({}, getButtonStateStyle(ButtonTypes.Secondary)), _f[ButtonTypes.Delete] = __assign({}, getButtonStateStyle(ButtonTypes.Delete)), _f),
-        sizes: (_g = {}, _g[ButtonSizes.Large] = {
+        types: (_f = {}, _f[ButtonVariant.Primary] = __assign({}, getButtonStateStyle(ButtonVariant.Primary)), _f[ButtonVariant.Secondary] = __assign({}, getButtonStateStyle(ButtonVariant.Secondary)), _f[ButtonVariant.Delete] = __assign({}, getButtonStateStyle(ButtonVariant.Delete)), _f),
+        sizes: (_g = {}, _g[ButtonSize.Large] = {
             height: CANVAS_BUTTON_HEIGHT_LARGE + "px",
@@ -126,3 +126,3 @@ padding: "0 " + canvas.spacing.l,
             fontWeight: 500
-        }, _g[ButtonSizes.Medium] = {
+        }, _g[ButtonSize.Medium] = {
             height: CANVAS_BUTTON_HEIGHT_MEDIUM + "px",
@@ -134,3 +134,3 @@ padding: "0 " + canvas.spacing.m,
             fontWeight: 500
-        }, _g[ButtonSizes.Small] = {
+        }, _g[ButtonSize.Small] = {
             height: CANVAS_BUTTON_HEIGHT_SMALL + "px",
@@ -149,12 +149,12 @@ padding: "0 " + canvas.spacing.xxs,
     variants: {
-        types: (_h = {}, _h[BetaButtonTypes.Primary] = __assign({}, getButtonStateStyle(BetaButtonTypes.Primary)), _h[BetaButtonTypes.Secondary] = __assign({}, getButtonStateStyle(BetaButtonTypes.Secondary)), _h[BetaButtonTypes.Delete] = __assign({}, getButtonStateStyle(BetaButtonTypes.Delete)), _h[BetaButtonTypes.Highlight] = __assign({}, getButtonStateStyle(BetaButtonTypes.Highlight)), _h[BetaButtonTypes.OutlinePrimary] = __assign({}, getButtonStateStyle(BetaButtonTypes.OutlinePrimary)), _h[BetaButtonTypes.OutlineSecondary] = __assign({}, getButtonStateStyle(BetaButtonTypes.OutlineSecondary)), _h[BetaButtonTypes.OutlineInverse] = __assign({}, getButtonStateStyle(BetaButtonTypes.OutlineInverse)), _h),
-        sizes: (_j = {}, _j[ButtonSizes.Large] = {
+        types: (_h = {}, _h[BetaButtonVariant.Primary] = __assign({}, getButtonStateStyle(BetaButtonVariant.Primary)), _h[BetaButtonVariant.Secondary] = __assign({}, getButtonStateStyle(BetaButtonVariant.Secondary)), _h[BetaButtonVariant.Delete] = __assign({}, getButtonStateStyle(BetaButtonVariant.Delete)), _h[BetaButtonVariant.Highlight] = __assign({}, getButtonStateStyle(BetaButtonVariant.Highlight)), _h[BetaButtonVariant.OutlinePrimary] = __assign({}, getButtonStateStyle(BetaButtonVariant.OutlinePrimary)), _h[BetaButtonVariant.OutlineSecondary] = __assign({}, getButtonStateStyle(BetaButtonVariant.OutlineSecondary)), _h[BetaButtonVariant.OutlineInverse] = __assign({}, getButtonStateStyle(BetaButtonVariant.OutlineInverse)), _h),
+        sizes: (_j = {}, _j[ButtonSize.Large] = {
             minWidth: '112px',
             height: '48px',
             padding: '0 18px'
-        }, _j[ButtonSizes.Medium] = {
+        }, _j[ButtonSize.Medium] = {
             minWidth: '96px',
             height: canvas.spacing.xl,
             padding: '0 14px'
-        }, _j[ButtonSizes.Small] = {
+        }, _j[ButtonSize.Small] = {
             minWidth: '80px',
@@ -170,4 +170,4 @@ height: canvas.spacing.l,
     variants: {
-        types: (_k = {}, _k[BetaButtonTypes.Primary] = betaButtonStyles.variants.types[BetaButtonTypes.Primary], _k[BetaButtonTypes.Secondary] = betaButtonStyles.variants.types[BetaButtonTypes.Secondary], _k),
-        sizes: (_l = {}, _l[ButtonSizes.Large] = betaButtonStyles.variants.sizes.large, _l[ButtonSizes.Medium] = betaButtonStyles.variants.sizes.medium, _l)
+        types: (_k = {}, _k[BetaButtonVariant.Primary] = betaButtonStyles.variants.types[BetaButtonVariant.Primary], _k[BetaButtonVariant.Secondary] = betaButtonStyles.variants.types[BetaButtonVariant.Secondary], _k),
+        sizes: (_l = {}, _l[ButtonSize.Large] = betaButtonStyles.variants.sizes.large, _l[ButtonSize.Medium] = betaButtonStyles.variants.sizes.medium, _l)
     }
@@ -179,7 +179,7 @@ };
     variants: {
-        types: (_m = {}, _m[TextButtonTypes.Default] = __assign({}, getButtonStateStyle(TextButtonTypes.Default)), _m[TextButtonTypes.Inverse] = __assign({}, getButtonStateStyle(TextButtonTypes.Inverse)), _m[TextButtonTypes.AllCaps] = __assign({}, getButtonStateStyle(TextButtonTypes.Default), { height: canvas.spacing.l }), _m[TextButtonTypes.InverseAllCaps] = __assign({}, getButtonStateStyle(TextButtonTypes.Inverse), { height: canvas.spacing.l }), _m),
-        sizes: (_o = {}, _o[ButtonSizes.Large] = {
+        types: (_m = {}, _m[TextButtonVariant.Default] = __assign({}, getButtonStateStyle(TextButtonVariant.Default)), _m[TextButtonVariant.Inverse] = __assign({}, getButtonStateStyle(TextButtonVariant.Inverse)), _m[TextButtonVariant.AllCaps] = __assign({}, getButtonStateStyle(TextButtonVariant.Default), { height: canvas.spacing.l }), _m[TextButtonVariant.InverseAllCaps] = __assign({}, getButtonStateStyle(TextButtonVariant.Inverse), { height: canvas.spacing.l }), _m),
+        sizes: (_o = {}, _o[ButtonSize.Large] = {
             height: canvas.spacing.xl,
             padding: '0 8px'
-        }, _o[ButtonSizes.Small] = {
+        }, _o[ButtonSize.Small] = {
             height: canvas.spacing.l,
@@ -197,3 +197,3 @@ padding: '0 8px'
     variants: {
-        sizes: (_q = {}, _q[ButtonSizes.Small] = {
+        sizes: (_q = {}, _q[ButtonSize.Small] = {
             width: canvas.spacing.l,
@@ -205,12 +205,12 @@ height: canvas.spacing.l,
             }
-        }, _q[ButtonSizes.Medium] = {
+        }, _q[ButtonSize.Medium] = {
             width: canvas.spacing.xl,
             height: canvas.spacing.xl
         }, _q),
-        types: (_r = {}, _r[IconButtonTypes.Square] = __assign({ borderRadius: '4px', width: canvas.spacing.l, height: canvas.spacing.l }, getButtonStateStyle(IconButtonTypes.Square)), _r[IconButtonTypes.SquareFilled] = __assign({ borderRadius: '4px', width: canvas.spacing.l, height: canvas.spacing.l }, getButtonStateStyle(IconButtonTypes.SquareFilled)), _r[IconButtonTypes.Plain] = __assign({}, getButtonStateStyle(IconButtonTypes.Plain)), _r[IconButtonTypes.Circle] = __assign({}, getButtonStateStyle(IconButtonTypes.Circle)), _r[IconButtonTypes.CircleFilled] = __assign({}, getButtonStateStyle(IconButtonTypes.CircleFilled)), _r[IconButtonTypes.Inverse] = __assign({}, getButtonStateStyle(IconButtonTypes.Inverse)), _r[IconButtonTypes.InverseFilled] = __assign({}, getButtonStateStyle(IconButtonTypes.InverseFilled)), _r)
+        types: (_r = {}, _r[IconButtonVariant.Square] = __assign({ borderRadius: '4px', width: canvas.spacing.l, height: canvas.spacing.l }, getButtonStateStyle(IconButtonVariant.Square)), _r[IconButtonVariant.SquareFilled] = __assign({ borderRadius: '4px', width: canvas.spacing.l, height: canvas.spacing.l }, getButtonStateStyle(IconButtonVariant.SquareFilled)), _r[IconButtonVariant.Plain] = __assign({}, getButtonStateStyle(IconButtonVariant.Plain)), _r[IconButtonVariant.Circle] = __assign({}, getButtonStateStyle(IconButtonVariant.Circle)), _r[IconButtonVariant.CircleFilled] = __assign({}, getButtonStateStyle(IconButtonVariant.CircleFilled)), _r[IconButtonVariant.Inverse] = __assign({}, getButtonStateStyle(IconButtonVariant.Inverse)), _r[IconButtonVariant.InverseFilled] = __assign({}, getButtonStateStyle(IconButtonVariant.InverseFilled)), _r)
     }
 };
-function getButtonStateStyle(buttonType) {
+function getButtonStateStyle(variant) {
     var _a, _b, _c, _d, _e;
-    var buttonColors = ButtonColors[buttonType];
+    var buttonColors = ButtonColors[variant];
     if (buttonColors == null) {
@@ -240,26 +240,24 @@ return {};
         }, buttonColors.labelDataDisabled && (_e = {}, _e['.' + labelDataBaseStyles.classname] = { color: buttonColors.labelDataDisabled }, _e)), '&:not([disabled])': {
-            '&:focus, &:active': __assign({ borderColor: buttonColors.focusBorder }, getButtonFocusRing(buttonType))
+            '&:focus, &:active': __assign({ borderColor: buttonColors.focusBorder }, getButtonFocusRing(variant))
         } });
 }
-function getButtonFocusRing(buttonType) {
-    var buttonColors = ButtonColors[buttonType];
+function getButtonFocusRing(variant) {
+    var buttonColors = ButtonColors[variant];
     if (buttonColors == null) {
         return {};
     }
-    switch (buttonType) {
-        case ButtonTypes.Primary:
-        case ButtonTypes.Secondary:
-        case IconButtonTypes.Square:
-        case IconButtonTypes.SquareFilled:
-        case TextButtonTypes.Default:
-        case TextButtonTypes.AllCaps:
+    switch (variant) {
+        case ButtonVariant.Primary:
+        case ButtonVariant.Secondary:
+        case TextButtonVariant.Default:
+        case TextButtonVariant.AllCaps:
             return focusRing(2, 0);
-        case BetaButtonTypes.OutlineInverse:
+        case BetaButtonVariant.OutlineInverse:
             return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
-        case IconButtonTypes.Plain:
+        case IconButtonVariant.Plain:
             return focusRing(2);
-        case IconButtonTypes.Inverse:
-        case IconButtonTypes.InverseFilled:
-        case TextButtonTypes.Inverse:
-        case TextButtonTypes.InverseAllCaps:
+        case IconButtonVariant.Inverse:
+        case IconButtonVariant.InverseFilled:
+        case TextButtonVariant.Inverse:
+        case TextButtonVariant.InverseAllCaps:
             return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
@@ -266,0 +264,0 @@ default:

dist/es6/lib/DropdownButton.d.ts

 import * as React from 'react';
 import { BaseButtonProps } from './Button';
-import { ButtonSizes, BetaButtonTypes } from './types';
+import { ButtonSize, BetaButtonVariant } from './types';
 export default class DropdownButton extends React.Component<BaseButtonProps> {
-    static Types: typeof BetaButtonTypes;
-    static Sizes: typeof ButtonSizes;
+    static Variant: typeof BetaButtonVariant;
+    static Size: typeof ButtonSize;
     static defaultProps: {
-        buttonType: BetaButtonTypes;
-        buttonSize: ButtonSizes;
+        variant: BetaButtonVariant;
+        size: ButtonSize;
     };
     render(): JSX.Element;
 }

dist/es6/lib/DropdownButton.js

@@ -28,16 +28,28 @@ var __extends = this && this.__extends || function () {
 };
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
 import * as React from 'react';
 import { ButtonBaseLabel, ButtonLabelIcon, getButtonStyle, getButtonSize } from './ButtonBase';
 import styled from 'react-emotion';
+import isPropValid from '@emotion/is-prop-valid';
 import { dropdownButtonStyles } from './ButtonStyles';
 import { caretDownIcon } from '@workday/canvas-system-icons-web';
-import { ButtonSizes, BetaButtonTypes } from './types';
+import { ButtonSize, BetaButtonVariant } from './types';
 var DropdownButtonCon = /*#__PURE__*/styled('button', {
+    shouldForwardProp: function (prop) {
+        return isPropValid(prop) && prop !== 'size';
+    },
     target: 'eaooou70'
 })(dropdownButtonStyles.styles, function (_a) {
-    var buttonType = _a.buttonType;
-    return getButtonStyle(dropdownButtonStyles, buttonType);
+    var variant = _a.variant;
+    return getButtonStyle(dropdownButtonStyles, variant);
 }, function (_a) {
-    var buttonSize = _a.buttonSize;
-    return getButtonSize(dropdownButtonStyles, buttonSize);
+    var size = _a.size;
+    return getButtonSize(dropdownButtonStyles, size);
 });
@@ -50,10 +62,17 @@ var DropdownButton = function (_super) {
     DropdownButton.prototype.render = function () {
-        var children = this.props.children;
-        return React.createElement(DropdownButtonCon, __assign({}, this.props), React.createElement(ButtonBaseLabel, __assign({}, this.props), children), React.createElement(ButtonLabelIcon, __assign({ icon: caretDownIcon }, this.props, { dropdown: true })));
+        var _a = this.props,
+            variant = _a.variant,
+            size = _a.size,
+            buttonRef = _a.buttonRef,
+            dataLabel = _a.dataLabel,
+            icon = _a.icon,
+            children = _a.children,
+            elemProps = __rest(_a, ["variant", "size", "buttonRef", "dataLabel", "icon", "children"]);
+        return React.createElement(DropdownButtonCon, __assign({ variant: variant, size: size, innerRef: buttonRef }, elemProps), React.createElement(ButtonBaseLabel, { variant: variant, size: size }, children), React.createElement(ButtonLabelIcon, { size: size, icon: caretDownIcon, dropdown: true }));
     };
-    DropdownButton.Types = BetaButtonTypes;
-    DropdownButton.Sizes = ButtonSizes;
+    DropdownButton.Variant = BetaButtonVariant;
+    DropdownButton.Size = ButtonSize;
     DropdownButton.defaultProps = {
-        buttonType: BetaButtonTypes.Primary,
-        buttonSize: ButtonSizes.Large
+        variant: BetaButtonVariant.Primary,
+        size: ButtonSize.Large
     };
@@ -60,0 +79,0 @@ return DropdownButton;

dist/es6/lib/IconButton.d.ts

 import * as React from 'react';
-import { IconButtonTypes, ButtonSizes } from './types';
-import { BaseButtonProps } from './Button';
-export interface IconButtonProps extends Partial<BaseButtonProps<IconButtonTypes>> {
-    toggled: boolean;
-    buttonSize?: ButtonSizes.Small | ButtonSizes.Medium;
+import { IconButtonVariant, IconButtonSize } from './types';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant: IconButtonVariant;
+    'aria-label': string;
+    size?: IconButtonSize;
+    toggled?: boolean;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    icon?: CanvasSystemIcon;
     onToggleChange?: (toggled: boolean | undefined) => void;
@@ -11,7 +15,7 @@ }
 export default class IconButton extends React.Component<IconButtonProps> {
-    static Types: typeof IconButtonTypes;
-    static Sizes: typeof ButtonSizes;
+    static Variant: typeof IconButtonVariant;
+    static Size: typeof IconButtonSize;
     static defaultProps: {
-        buttonType: IconButtonTypes;
-        toggled: undefined;
+        readonly variant: IconButtonVariant.Circle;
+        readonly size: IconButtonSize.Medium;
     };
@@ -18,0 +22,0 @@ componentDidUpdate(prevProps: IconButtonProps): void;

dist/es6/lib/IconButton.js

@@ -39,3 +39,4 @@ var __extends = this && this.__extends || function () {
 import styled from 'react-emotion';
-import { IconButtonTypes, ButtonSizes } from './types';
+import isPropValid from '@emotion/is-prop-valid';
+import { IconButtonVariant, IconButtonSize } from './types';
 import { iconButtonStyles } from './ButtonStyles';
@@ -46,36 +47,21 @@ import { colors } from '@workday/canvas-kit-react-core';
 export var IconButtonCon = /*#__PURE__*/styled('button', {
+    shouldForwardProp: function (prop) {
+        return isPropValid(prop) && prop !== 'size';
+    },
     target: 'e7hqos50'
 })(iconButtonStyles.styles, function (_a) {
-    var buttonType = _a.buttonType;
-    return getButtonStyle(iconButtonStyles, buttonType);
+    var variant = _a.variant;
+    return getButtonStyle(iconButtonStyles, variant);
 }, function (_a) {
-    var buttonSize = _a.buttonSize,
-        buttonType = _a.buttonType;
-    if (buttonType === IconButtonTypes.Square || buttonType === IconButtonTypes.SquareFilled) {
-        switch (buttonSize) {
-            case ButtonSizes.Medium:
-                return iconButtonStyles.variants.sizes.medium;
-            default:
-            case ButtonSizes.Small:
-                return {};
-        }
-    } else if (buttonType === IconButtonTypes.Plain) {
-        switch (buttonSize) {
-            default:
-            case ButtonSizes.Medium:
-                return __assign({ margin: '-8px' }, iconButtonStyles.variants.sizes.medium);
-            case ButtonSizes.Small:
-                return __assign({ margin: '-6px' }, iconButtonStyles.variants.sizes.small);
-        }
-    } else {
-        switch (buttonSize) {
-            default:
-            case ButtonSizes.Medium:
-                return iconButtonStyles.variants.sizes.medium;
-            case ButtonSizes.Small:
-                return iconButtonStyles.variants.sizes.small;
-        }
+    var size = _a.size,
+        variant = _a.variant;
+    switch (size) {
+        default:
+        case IconButtonSize.Medium:
+            return __assign({ margin: variant === IconButtonVariant.Plain ? '-8px' : undefined }, iconButtonStyles.variants.sizes.medium);
+        case IconButtonSize.Small:
+            return __assign({ margin: variant === IconButtonVariant.Plain ? '-6px' : undefined }, iconButtonStyles.variants.sizes.small);
     }
 }, function (_a) {
-    var buttonType = _a.buttonType,
+    var variant = _a.variant,
         toggled = _a.toggled;
@@ -85,4 +71,4 @@ if (!toggled) {
     }
-    switch (buttonType) {
-        case IconButtonTypes.SquareFilled:
+    switch (variant) {
+        case IconButtonVariant.SquareFilled:
         default:
@@ -92,15 +78,15 @@ return __assign({ '&:focus&:hover, &:focus, &:active': __assign({ backgroundColor: colors.blueberry400 }, getFillSelector(colors.frenchVanilla100), getAccentSelector(colors.frenchVanilla100)), '&:not([disabled]):focus': __assign({}, toggled ? focusRing(2, 2) : {}), '&:hover': {
                 }, backgroundColor: colors.blueberry400, borderColor: colors.blueberry400 }, getFillSelector(colors.frenchVanilla100), getAccentSelector(colors.frenchVanilla100));
-        case IconButtonTypes.Square:
+        case IconButtonVariant.Square:
             return __assign({ '&:focus:hover, &:focus, &:active': __assign({ backgroundColor: 'transparent' }, getFillSelector(colors.blueberry400), getAccentSelector(colors.blueberry400)), '&:not([disabled]):focus': __assign({}, toggled ? focusRing(2, 0) : {}), '&:hover, &:focus:hover': {
                     backgroundColor: colors.soap300
                 }, backgroundColor: colors.frenchVanilla100 }, getFillSelector(colors.blueberry400), getAccentSelector(colors.blueberry400));
-        case IconButtonTypes.Circle:
+        case IconButtonVariant.Circle:
             return __assign({ '&:active': __assign({}, getFillSelector(colors.blueberry400), getAccentSelector(colors.frenchVanilla100)) }, getBackgroundSelector(colors.blueberry400), getFillSelector(colors.blueberry400), getAccentSelector(colors.frenchVanilla100));
-        case IconButtonTypes.CircleFilled:
+        case IconButtonVariant.CircleFilled:
             return __assign({ backgroundColor: colors.blueberry400, '&:hover, &:focus&:hover': __assign({ backgroundColor: colors.blueberry500 }, getAccentSelector(colors.blueberry500)) }, getBackgroundSelector(colors.frenchVanilla100), getFillSelector(colors.frenchVanilla100), getAccentSelector(colors.blueberry400));
-        case IconButtonTypes.Inverse:
+        case IconButtonVariant.Inverse:
             return __assign({ '&:hover span .wd-icon-fill, span .wd-icon-fill': {
                     fill: colors.frenchVanilla100
                 } }, getBackgroundSelector(colors.frenchVanilla100), getAccentSelector(colors.licorice200));
-        case IconButtonTypes.InverseFilled:
+        case IconButtonVariant.InverseFilled:
             return __assign({ backgroundColor: 'rgba(0, 0, 0, 0.4)', '&:focus': {
@@ -145,13 +131,16 @@ backgroundColor: 'rgba(0, 0, 0, 0.4)'
             buttonRef = _a.buttonRef,
-            buttonSize = _a.buttonSize,
+            size = _a.size,
+            variant = _a.variant,
             onToggleChange = _a.onToggleChange,
+            icon = _a.icon,
             toggled = _a.toggled,
-            elemProps = __rest(_a, ["buttonRef", "buttonSize", "onToggleChange", "toggled"]);
-        return React.createElement(IconButtonCon, __assign({ toggled: toggled, innerRef: buttonRef, buttonSize: buttonSize }, elemProps, { "aria-pressed": this.props.toggled }), this.props.icon ? React.createElement(SystemIcon, { icon: this.props.icon }) : this.props.children);
+            children = _a.children,
+            elemProps = __rest(_a, ["buttonRef", "size", "variant", "onToggleChange", "icon", "toggled", "children"]);
+        return React.createElement(IconButtonCon, __assign({ toggled: toggled, innerRef: buttonRef, variant: variant, size: size, "aria-pressed": toggled }, elemProps), icon ? React.createElement(SystemIcon, { icon: icon }) : children);
     };
-    IconButton.Types = IconButtonTypes;
-    IconButton.Sizes = ButtonSizes;
+    IconButton.Variant = IconButtonVariant;
+    IconButton.Size = IconButtonSize;
     IconButton.defaultProps = {
-        buttonType: IconButtonTypes.Circle,
-        toggled: undefined
+        variant: IconButtonVariant.Circle,
+        size: IconButtonSize.Medium
     };
@@ -158,0 +147,0 @@ return IconButton;

dist/es6/lib/IconButtonToggleGroup.js

@@ -55,3 +55,3 @@ var __extends = this && this.__extends || function () {
                     toggled: toggled,
-                    buttonType: IconButton.Types.SquareFilled,
+                    variant: IconButton.Variant.SquareFilled,
                     onClick: _this.onButtonClick.bind(_this, childProps.onClick, index)
@@ -58,0 +58,0 @@ });

dist/es6/lib/TextButton.d.ts

 import * as React from 'react';
-import { ButtonSizes, IconPositions, TextButtonTypes } from './types';
+import { ButtonSize, IconPosition, TextButtonVariant } from './types';
 import { BaseButtonProps } from './Button';
-export interface TextButtonProps extends BaseButtonProps<TextButtonTypes> {
-    iconPosition?: IconPositions;
+export interface TextButtonProps extends BaseButtonProps<TextButtonVariant> {
+    iconPosition?: IconPosition;
 }
 export default class TextButton extends React.Component<TextButtonProps> {
-    static IconPositions: typeof IconPositions;
-    static Types: typeof TextButtonTypes;
-    static Sizes: typeof ButtonSizes;
+    static IconPosition: typeof IconPosition;
+    static Variant: typeof TextButtonVariant;
+    static Size: typeof ButtonSize;
     static defaultProps: {
-        iconPosition: IconPositions;
-        buttonType: TextButtonTypes;
-        buttonSize: ButtonSizes;
+        iconPosition: IconPosition;
+        variant: TextButtonVariant;
+        size: ButtonSize;
     };
     render(): JSX.Element;
 }

dist/es6/lib/TextButton.js

@@ -39,18 +39,22 @@ var __extends = this && this.__extends || function () {
 import styled from 'react-emotion';
-import { ButtonSizes, IconPositions, TextButtonTypes } from './types';
+import isPropValid from '@emotion/is-prop-valid';
+import { ButtonSize, IconPosition, TextButtonVariant } from './types';
 import { textButtonStyles } from './ButtonStyles';
 var TextButtonCon = /*#__PURE__*/styled('button', {
+    shouldForwardProp: function (prop) {
+        return isPropValid(prop) && prop !== 'size';
+    },
     target: 'ecfc8xq0'
 })(textButtonStyles.styles, function (_a) {
-    var buttonType = _a.buttonType;
-    return getButtonStyle(textButtonStyles, buttonType);
+    var variant = _a.variant;
+    return getButtonStyle(textButtonStyles, variant);
 }, function (_a) {
-    var buttonSize = _a.buttonSize;
+    var size = _a.size;
     var sizes = textButtonStyles.variants.sizes;
-    switch (buttonSize) {
-        case ButtonSizes.Large:
+    switch (size) {
+        case ButtonSize.Large:
         default:
             return sizes.large;
-        case ButtonSizes.Medium:
-        case ButtonSizes.Small:
+        case ButtonSize.Medium:
+        case ButtonSize.Small:
             return sizes.small;
@@ -69,12 +73,16 @@ }
             children = _a.children,
-            elemProps = __rest(_a, ["buttonRef", "onClick", "children"]);
-        return React.createElement(TextButtonCon, __assign({ onClick: onClick, innerRef: buttonRef }, elemProps), elemProps.icon && elemProps.iconPosition === IconPositions.Left && React.createElement(ButtonLabelIcon, __assign({}, elemProps)), React.createElement(ButtonBaseLabel, __assign({}, elemProps), children), elemProps.icon && elemProps.iconPosition === IconPositions.Right && React.createElement(ButtonLabelIcon, __assign({}, elemProps)));
+            iconPosition = _a.iconPosition,
+            size = _a.size,
+            variant = _a.variant,
+            icon = _a.icon,
+            elemProps = __rest(_a, ["buttonRef", "onClick", "children", "iconPosition", "size", "variant", "icon"]);
+        return React.createElement(TextButtonCon, __assign({ onClick: onClick, innerRef: buttonRef, size: size, variant: variant }, elemProps), icon && iconPosition === IconPosition.Left && React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }), React.createElement(ButtonBaseLabel, { size: size, variant: variant }, children), icon && iconPosition === IconPosition.Right && React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }));
     };
-    TextButton.IconPositions = IconPositions;
-    TextButton.Types = TextButtonTypes;
-    TextButton.Sizes = ButtonSizes;
+    TextButton.IconPosition = IconPosition;
+    TextButton.Variant = TextButtonVariant;
+    TextButton.Size = ButtonSize;
     TextButton.defaultProps = {
-        iconPosition: IconPositions.Left,
-        buttonType: TextButtonTypes.Default,
-        buttonSize: ButtonSizes.Large
+        iconPosition: IconPosition.Left,
+        variant: TextButtonVariant.Default,
+        size: ButtonSize.Large
     };
@@ -81,0 +89,0 @@ return TextButton;

dist/es6/lib/types.d.ts

@@ -1,2 +0,2 @@
-export declare enum ButtonSizes {
+export declare enum ButtonSize {
     Small = "small",
@@ -6,3 +6,7 @@ Medium = "medium",
 }
-export declare enum ButtonTypes {
+export declare enum IconButtonSize {
+    Small = "small",
+    Medium = "medium"
+}
+export declare enum ButtonVariant {
     Primary = "primary",
@@ -12,3 +16,3 @@ Secondary = "secondary",
 }
-export declare enum BetaButtonTypes {
+export declare enum BetaButtonVariant {
     Primary = "betaPrimary",
@@ -22,3 +26,3 @@ Secondary = "betaSecondary",
 }
-export declare enum IconButtonTypes {
+export declare enum IconButtonVariant {
     Square = "square",
@@ -32,7 +36,7 @@ SquareFilled = "squareFilled",
 }
-export declare enum IconPositions {
+export declare enum IconPosition {
     Left = "iconPositionLeft",
     Right = "iconPositionRight"
 }
-export declare enum TextButtonTypes {
+export declare enum TextButtonVariant {
     Default = "text",
@@ -43,2 +47,2 @@ Inverse = "textInverse",
 }
-export declare type AllButtonTypes = ButtonTypes | BetaButtonTypes | TextButtonTypes | IconButtonTypes;
+export declare type AllButtonVariants = ButtonVariant | BetaButtonVariant | TextButtonVariant | IconButtonVariant;

dist/es6/lib/types.js

@@ -1,44 +0,49 @@
-export var ButtonSizes;
-(function (ButtonSizes) {
-    ButtonSizes["Small"] = "small";
-    ButtonSizes["Medium"] = "medium";
-    ButtonSizes["Large"] = "large";
-})(ButtonSizes || (ButtonSizes = {}));
-export var ButtonTypes;
-(function (ButtonTypes) {
-    ButtonTypes["Primary"] = "primary";
-    ButtonTypes["Secondary"] = "secondary";
-    ButtonTypes["Delete"] = "delete";
-})(ButtonTypes || (ButtonTypes = {}));
-export var BetaButtonTypes;
-(function (BetaButtonTypes) {
-    BetaButtonTypes["Primary"] = "betaPrimary";
-    BetaButtonTypes["Secondary"] = "betaSecondary";
-    BetaButtonTypes["Delete"] = "betaDelete";
-    BetaButtonTypes["Highlight"] = "highlight";
-    BetaButtonTypes["OutlinePrimary"] = "outlinePrimary";
-    BetaButtonTypes["OutlineSecondary"] = "outlineSecondary";
-    BetaButtonTypes["OutlineInverse"] = "outlineInverse";
-})(BetaButtonTypes || (BetaButtonTypes = {}));
-export var IconButtonTypes;
-(function (IconButtonTypes) {
-    IconButtonTypes["Square"] = "square";
-    IconButtonTypes["SquareFilled"] = "squareFilled";
-    IconButtonTypes["Plain"] = "plain";
-    IconButtonTypes["Circle"] = "circle";
-    IconButtonTypes["CircleFilled"] = "circleFilled";
-    IconButtonTypes["Inverse"] = "inverse";
-    IconButtonTypes["InverseFilled"] = "inverseFilled";
-})(IconButtonTypes || (IconButtonTypes = {}));
-export var IconPositions;
-(function (IconPositions) {
-    IconPositions["Left"] = "iconPositionLeft";
-    IconPositions["Right"] = "iconPositionRight";
-})(IconPositions || (IconPositions = {}));
-export var TextButtonTypes;
-(function (TextButtonTypes) {
-    TextButtonTypes["Default"] = "text";
-    TextButtonTypes["Inverse"] = "textInverse";
-    TextButtonTypes["AllCaps"] = "textAllCaps";
-    TextButtonTypes["InverseAllCaps"] = "textInverseAllCaps";
-})(TextButtonTypes || (TextButtonTypes = {}));
+export var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize["Small"] = "small";
+    ButtonSize["Medium"] = "medium";
+    ButtonSize["Large"] = "large";
+})(ButtonSize || (ButtonSize = {}));
+export var IconButtonSize;
+(function (IconButtonSize) {
+    IconButtonSize["Small"] = "small";
+    IconButtonSize["Medium"] = "medium";
+})(IconButtonSize || (IconButtonSize = {}));
+export var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant["Primary"] = "primary";
+    ButtonVariant["Secondary"] = "secondary";
+    ButtonVariant["Delete"] = "delete";
+})(ButtonVariant || (ButtonVariant = {}));
+export var BetaButtonVariant;
+(function (BetaButtonVariant) {
+    BetaButtonVariant["Primary"] = "betaPrimary";
+    BetaButtonVariant["Secondary"] = "betaSecondary";
+    BetaButtonVariant["Delete"] = "betaDelete";
+    BetaButtonVariant["Highlight"] = "highlight";
+    BetaButtonVariant["OutlinePrimary"] = "outlinePrimary";
+    BetaButtonVariant["OutlineSecondary"] = "outlineSecondary";
+    BetaButtonVariant["OutlineInverse"] = "outlineInverse";
+})(BetaButtonVariant || (BetaButtonVariant = {}));
+export var IconButtonVariant;
+(function (IconButtonVariant) {
+    IconButtonVariant["Square"] = "square";
+    IconButtonVariant["SquareFilled"] = "squareFilled";
+    IconButtonVariant["Plain"] = "plain";
+    IconButtonVariant["Circle"] = "circle";
+    IconButtonVariant["CircleFilled"] = "circleFilled";
+    IconButtonVariant["Inverse"] = "inverse";
+    IconButtonVariant["InverseFilled"] = "inverseFilled";
+})(IconButtonVariant || (IconButtonVariant = {}));
+export var IconPosition;
+(function (IconPosition) {
+    IconPosition["Left"] = "iconPositionLeft";
+    IconPosition["Right"] = "iconPositionRight";
+})(IconPosition || (IconPosition = {}));
+export var TextButtonVariant;
+(function (TextButtonVariant) {
+    TextButtonVariant["Default"] = "text";
+    TextButtonVariant["Inverse"] = "textInverse";
+    TextButtonVariant["AllCaps"] = "textAllCaps";
+    TextButtonVariant["InverseAllCaps"] = "textInverseAllCaps";
+})(TextButtonVariant || (TextButtonVariant = {}));

lib/ButtonColors.ts

 import canvas from '@workday/canvas-kit-react-core';
 import {
-  AllButtonTypes,
-  ButtonTypes,
-  TextButtonTypes,
-  BetaButtonTypes,
-  IconButtonTypes,
+  AllButtonVariants,
+  ButtonVariant,
+  TextButtonVariant,
+  BetaButtonVariant,
+  IconButtonVariant,
 } from './types';
@@ -30,10 +30,10 @@
 
-export type ButtonColorCollection = {[key in AllButtonTypes]: GenericButtonColors | null};
+export type ButtonColorCollection = {[key in AllButtonVariants]: GenericButtonColors | null};
 
 export const ButtonColors: ButtonColorCollection = {
   // TODO (beta button): remove in favor of beta buttons, consider moving from design-assets too
-  [ButtonTypes.Primary]: canvas.buttonColors.primary,
-  [ButtonTypes.Secondary]: canvas.buttonColors.secondary,
-  [ButtonTypes.Delete]: canvas.buttonColors.delete,
-  [BetaButtonTypes.Primary]: {
+  [ButtonVariant.Primary]: canvas.buttonColors.primary,
+  [ButtonVariant.Secondary]: canvas.buttonColors.secondary,
+  [ButtonVariant.Delete]: canvas.buttonColors.delete,
+  [BetaButtonVariant.Primary]: {
     background: canvas.colors.blueberry400,
@@ -60,3 +60,3 @@ border: 'transparent',
   },
-  [BetaButtonTypes.Secondary]: {
+  [BetaButtonVariant.Secondary]: {
     background: canvas.colors.soap200,
@@ -85,3 +85,3 @@ border: 'transparent',
   },
-  [BetaButtonTypes.Delete]: {
+  [BetaButtonVariant.Delete]: {
     background: canvas.colors.cinnamon500,
@@ -102,3 +102,3 @@ border: canvas.colors.cinnamon500,
   },
-  [BetaButtonTypes.Highlight]: {
+  [BetaButtonVariant.Highlight]: {
     background: canvas.colors.soap200,
@@ -125,3 +125,3 @@ border: canvas.colors.soap200,
   },
-  [BetaButtonTypes.OutlinePrimary]: {
+  [BetaButtonVariant.OutlinePrimary]: {
     background: 'transparent',
@@ -148,3 +148,3 @@ border: canvas.colors.blueberry400,
   },
-  [BetaButtonTypes.OutlineSecondary]: {
+  [BetaButtonVariant.OutlineSecondary]: {
     background: 'transparent',
@@ -171,3 +171,3 @@ border: canvas.colors.soap500,
   },
-  [BetaButtonTypes.OutlineInverse]: {
+  [BetaButtonVariant.OutlineInverse]: {
     background: 'transparent',
@@ -200,3 +200,3 @@ border: canvas.colors.frenchVanilla100,
   },
-  [TextButtonTypes.Default]: {
+  [TextButtonVariant.Default]: {
     background: 'transparent',
@@ -221,3 +221,3 @@ border: 'transparent',
   },
-  [TextButtonTypes.Inverse]: {
+  [TextButtonVariant.Inverse]: {
     background: 'transparent',
@@ -243,5 +243,5 @@ border: 'transparent',
   },
-  [TextButtonTypes.AllCaps]: null,
-  [TextButtonTypes.InverseAllCaps]: null,
-  [IconButtonTypes.Square]: {
+  [TextButtonVariant.AllCaps]: null,
+  [TextButtonVariant.InverseAllCaps]: null,
+  [IconButtonVariant.Square]: {
     background: 'transparent',
@@ -258,3 +258,3 @@ activeBackground: canvas.colors.soap400,
   },
-  [IconButtonTypes.SquareFilled]: {
+  [IconButtonVariant.SquareFilled]: {
     background: canvas.colors.soap200,
@@ -270,3 +270,3 @@ border: canvas.colors.soap500,
   },
-  [IconButtonTypes.Plain]: {
+  [IconButtonVariant.Plain]: {
     background: 'transparent',
@@ -284,3 +284,3 @@ activeBackground: 'transparent',
   },
-  [IconButtonTypes.Circle]: {
+  [IconButtonVariant.Circle]: {
     background: 'transparent',
@@ -297,3 +297,3 @@ activeBackground: canvas.colors.soap400,
   },
-  [IconButtonTypes.CircleFilled]: {
+  [IconButtonVariant.CircleFilled]: {
     background: canvas.colors.soap200,
@@ -308,3 +308,3 @@ activeBackground: canvas.colors.soap500,
   },
-  [IconButtonTypes.Inverse]: {
+  [IconButtonVariant.Inverse]: {
     background: 'transparent',
@@ -319,3 +319,3 @@ activeBackground: 'rgba(0, 0, 0, 0.4)',
   },
-  [IconButtonTypes.InverseFilled]: {
+  [IconButtonVariant.InverseFilled]: {
     background: 'rgba(0, 0, 0, 0.2)',
@@ -322,0 +322,0 @@ activeBackground: 'rgba(0, 0, 0, 0.4)',

lib/ButtonStyles.ts

@@ -5,9 +5,9 @@ import canvas from '@workday/canvas-kit-react-core';
 import {
-  ButtonTypes,
-  ButtonSizes,
-  IconPositions,
-  AllButtonTypes,
-  TextButtonTypes,
-  BetaButtonTypes,
-  IconButtonTypes,
+  ButtonVariant,
+  ButtonSize,
+  IconPosition,
+  AllButtonVariants,
+  TextButtonVariant,
+  BetaButtonVariant,
+  IconButtonVariant,
 } from './types';
@@ -22,4 +22,4 @@ import {ButtonColors} from './ButtonColors';
   variants?: {
-    types: {[key in AllButtonTypes | IconPositions]?: CSSObject};
-    sizes: {[key in ButtonSizes]?: CSSObject};
+    types: {[key in AllButtonVariants | IconPosition]?: CSSObject};
+    sizes: {[key in ButtonSize]?: CSSObject};
   };
@@ -45,6 +45,6 @@ }
     types: {
-      [TextButtonTypes.Default]: {
+      [TextButtonVariant.Default]: {
         padding: '0',
       },
-      [TextButtonTypes.AllCaps]: {
+      [TextButtonVariant.AllCaps]: {
         ...canvas.type.variant.caps,
@@ -55,3 +55,3 @@ fontSize: '14px',
       },
-      [ButtonTypes.Primary]: {
+      [ButtonVariant.Primary]: {
         fontSize: 'inherit',
@@ -61,3 +61,3 @@ fontWeight: 'inherit',
       },
-      [ButtonTypes.Secondary]: {
+      [ButtonVariant.Secondary]: {
         fontSize: 'inherit',
@@ -67,3 +67,3 @@ fontWeight: 'inherit',
       },
-      [ButtonTypes.Delete]: {
+      [ButtonVariant.Delete]: {
         fontSize: 'inherit',
@@ -75,11 +75,11 @@ fontWeight: 'inherit',
     sizes: {
-      [ButtonSizes.Large]: {
+      [ButtonSize.Large]: {
         fontSize: '16px',
         padding: '0 12px',
       },
-      [ButtonSizes.Medium]: {
+      [ButtonSize.Medium]: {
         fontSize: '14px',
         padding: '0 8px',
       },
-      [ButtonSizes.Small]: {
+      [ButtonSize.Small]: {
         fontSize: '14px',
@@ -102,6 +102,6 @@ padding: '0',
     sizes: {
-      [ButtonSizes.Large]: {
+      [ButtonSize.Large]: {
         paddingRight: '12px',
       },
-      [ButtonSizes.Medium]: {
+      [ButtonSize.Medium]: {
         paddingRight: '8px',
@@ -121,6 +121,6 @@ fontSize: '14px',
     types: {
-      [IconPositions.Left]: {
+      [IconPosition.Left]: {
         padding: '0 8px 0 0',
       },
-      [IconPositions.Right]: {
+      [IconPosition.Right]: {
         padding: '0 0 0 8px',
@@ -130,6 +130,6 @@ },
     sizes: {
-      [ButtonSizes.Large]: {
+      [ButtonSize.Large]: {
         paddingLeft: '8px',
       },
-      [ButtonSizes.Medium]: {
+      [ButtonSize.Medium]: {
         paddingLeft: '4px',
@@ -162,14 +162,14 @@ },
     types: {
-      [ButtonTypes.Primary]: {
-        ...getButtonStateStyle(ButtonTypes.Primary),
+      [ButtonVariant.Primary]: {
+        ...getButtonStateStyle(ButtonVariant.Primary),
       },
-      [ButtonTypes.Secondary]: {
-        ...getButtonStateStyle(ButtonTypes.Secondary),
+      [ButtonVariant.Secondary]: {
+        ...getButtonStateStyle(ButtonVariant.Secondary),
       },
-      [ButtonTypes.Delete]: {
-        ...getButtonStateStyle(ButtonTypes.Delete),
+      [ButtonVariant.Delete]: {
+        ...getButtonStateStyle(ButtonVariant.Delete),
       },
     },
     sizes: {
-      [ButtonSizes.Large]: {
+      [ButtonSize.Large]: {
         height: `${CANVAS_BUTTON_HEIGHT_LARGE}px`,
@@ -182,3 +182,3 @@ padding: `0 ${canvas.spacing.l}`,
       },
-      [ButtonSizes.Medium]: {
+      [ButtonSize.Medium]: {
         height: `${CANVAS_BUTTON_HEIGHT_MEDIUM}px`,
@@ -191,3 +191,3 @@ padding: `0 ${canvas.spacing.m}`,
       },
-      [ButtonSizes.Small]: {
+      [ButtonSize.Small]: {
         height: `${CANVAS_BUTTON_HEIGHT_SMALL}px`,
@@ -214,26 +214,26 @@ padding: `0 ${canvas.spacing.xxs}`,
     types: {
-      [BetaButtonTypes.Primary]: {
-        ...getButtonStateStyle(BetaButtonTypes.Primary),
+      [BetaButtonVariant.Primary]: {
+        ...getButtonStateStyle(BetaButtonVariant.Primary),
       },
-      [BetaButtonTypes.Secondary]: {
-        ...getButtonStateStyle(BetaButtonTypes.Secondary),
+      [BetaButtonVariant.Secondary]: {
+        ...getButtonStateStyle(BetaButtonVariant.Secondary),
       },
-      [BetaButtonTypes.Delete]: {
-        ...getButtonStateStyle(BetaButtonTypes.Delete),
+      [BetaButtonVariant.Delete]: {
+        ...getButtonStateStyle(BetaButtonVariant.Delete),
       },
-      [BetaButtonTypes.Highlight]: {
-        ...getButtonStateStyle(BetaButtonTypes.Highlight),
+      [BetaButtonVariant.Highlight]: {
+        ...getButtonStateStyle(BetaButtonVariant.Highlight),
       },
-      [BetaButtonTypes.OutlinePrimary]: {
-        ...getButtonStateStyle(BetaButtonTypes.OutlinePrimary),
+      [BetaButtonVariant.OutlinePrimary]: {
+        ...getButtonStateStyle(BetaButtonVariant.OutlinePrimary),
       },
-      [BetaButtonTypes.OutlineSecondary]: {
-        ...getButtonStateStyle(BetaButtonTypes.OutlineSecondary),
+      [BetaButtonVariant.OutlineSecondary]: {
+        ...getButtonStateStyle(BetaButtonVariant.OutlineSecondary),
       },
-      [BetaButtonTypes.OutlineInverse]: {
-        ...getButtonStateStyle(BetaButtonTypes.OutlineInverse),
+      [BetaButtonVariant.OutlineInverse]: {
+        ...getButtonStateStyle(BetaButtonVariant.OutlineInverse),
       },
     },
     sizes: {
-      [ButtonSizes.Large]: {
+      [ButtonSize.Large]: {
         minWidth: '112px',
@@ -243,3 +243,3 @@ height: '48px',
       },
-      [ButtonSizes.Medium]: {
+      [ButtonSize.Medium]: {
         minWidth: '96px',
@@ -249,3 +249,3 @@ height: canvas.spacing.xl,
       },
-      [ButtonSizes.Small]: {
+      [ButtonSize.Small]: {
         minWidth: '80px',
@@ -266,8 +266,8 @@ height: canvas.spacing.l,
     types: {
-      [BetaButtonTypes.Primary]: betaButtonStyles.variants!.types[BetaButtonTypes.Primary],
-      [BetaButtonTypes.Secondary]: betaButtonStyles.variants!.types[BetaButtonTypes.Secondary],
+      [BetaButtonVariant.Primary]: betaButtonStyles.variants!.types[BetaButtonVariant.Primary],
+      [BetaButtonVariant.Secondary]: betaButtonStyles.variants!.types[BetaButtonVariant.Secondary],
     },
     sizes: {
-      [ButtonSizes.Large]: betaButtonStyles.variants!.sizes.large,
-      [ButtonSizes.Medium]: betaButtonStyles.variants!.sizes.medium,
+      [ButtonSize.Large]: betaButtonStyles.variants!.sizes.large,
+      [ButtonSize.Medium]: betaButtonStyles.variants!.sizes.medium,
     },
@@ -289,14 +289,14 @@ },
     types: {
-      [TextButtonTypes.Default]: {
-        ...getButtonStateStyle(TextButtonTypes.Default),
+      [TextButtonVariant.Default]: {
+        ...getButtonStateStyle(TextButtonVariant.Default),
       },
-      [TextButtonTypes.Inverse]: {
-        ...getButtonStateStyle(TextButtonTypes.Inverse),
+      [TextButtonVariant.Inverse]: {
+        ...getButtonStateStyle(TextButtonVariant.Inverse),
       },
-      [TextButtonTypes.AllCaps]: {
-        ...getButtonStateStyle(TextButtonTypes.Default),
+      [TextButtonVariant.AllCaps]: {
+        ...getButtonStateStyle(TextButtonVariant.Default),
         height: canvas.spacing.l,
       },
-      [TextButtonTypes.InverseAllCaps]: {
-        ...getButtonStateStyle(TextButtonTypes.Inverse),
+      [TextButtonVariant.InverseAllCaps]: {
+        ...getButtonStateStyle(TextButtonVariant.Inverse),
         height: canvas.spacing.l,
@@ -306,7 +306,7 @@ },
     sizes: {
-      [ButtonSizes.Large]: {
+      [ButtonSize.Large]: {
         height: canvas.spacing.xl,
         padding: '0 8px',
       },
-      [ButtonSizes.Small]: {
+      [ButtonSize.Small]: {
         height: canvas.spacing.l,
@@ -333,3 +333,3 @@ padding: '0 8px',
     sizes: {
-      [ButtonSizes.Small]: {
+      [ButtonSize.Small]: {
         width: canvas.spacing.l,
@@ -342,3 +342,3 @@ height: canvas.spacing.l,
       },
-      [ButtonSizes.Medium]: {
+      [ButtonSize.Medium]: {
         width: canvas.spacing.xl,
@@ -349,28 +349,28 @@ height: canvas.spacing.xl,
     types: {
-      [IconButtonTypes.Square]: {
+      [IconButtonVariant.Square]: {
         borderRadius: '4px',
         width: canvas.spacing.l,
         height: canvas.spacing.l,
-        ...getButtonStateStyle(IconButtonTypes.Square),
+        ...getButtonStateStyle(IconButtonVariant.Square),
       },
-      [IconButtonTypes.SquareFilled]: {
+      [IconButtonVariant.SquareFilled]: {
         borderRadius: '4px',
         width: canvas.spacing.l,
         height: canvas.spacing.l,
-        ...getButtonStateStyle(IconButtonTypes.SquareFilled),
+        ...getButtonStateStyle(IconButtonVariant.SquareFilled),
       },
-      [IconButtonTypes.Plain]: {
-        ...getButtonStateStyle(IconButtonTypes.Plain),
+      [IconButtonVariant.Plain]: {
+        ...getButtonStateStyle(IconButtonVariant.Plain),
       },
-      [IconButtonTypes.Circle]: {
-        ...getButtonStateStyle(IconButtonTypes.Circle),
+      [IconButtonVariant.Circle]: {
+        ...getButtonStateStyle(IconButtonVariant.Circle),
       },
-      [IconButtonTypes.CircleFilled]: {
-        ...getButtonStateStyle(IconButtonTypes.CircleFilled),
+      [IconButtonVariant.CircleFilled]: {
+        ...getButtonStateStyle(IconButtonVariant.CircleFilled),
       },
-      [IconButtonTypes.Inverse]: {
-        ...getButtonStateStyle(IconButtonTypes.Inverse),
+      [IconButtonVariant.Inverse]: {
+        ...getButtonStateStyle(IconButtonVariant.Inverse),
       },
-      [IconButtonTypes.InverseFilled]: {
-        ...getButtonStateStyle(IconButtonTypes.InverseFilled),
+      [IconButtonVariant.InverseFilled]: {
+        ...getButtonStateStyle(IconButtonVariant.InverseFilled),
       },
@@ -381,4 +381,4 @@ },
 
-function getButtonStateStyle(buttonType: AllButtonTypes): CSSObject {
-  const buttonColors = ButtonColors[buttonType];
+function getButtonStateStyle(variant: AllButtonVariants): CSSObject {
+  const buttonColors = ButtonColors[variant];
 
@@ -457,3 +457,3 @@ if (buttonColors == null) {
         borderColor: buttonColors.focusBorder,
-        ...getButtonFocusRing(buttonType),
+        ...getButtonFocusRing(variant),
       },
@@ -464,4 +464,4 @@ },
 
-function getButtonFocusRing(buttonType: AllButtonTypes): CSSObject {
-  const buttonColors = ButtonColors[buttonType];
+function getButtonFocusRing(variant: AllButtonVariants): CSSObject {
+  const buttonColors = ButtonColors[variant];
 
@@ -472,18 +472,16 @@ if (buttonColors == null) {
 
-  switch (buttonType) {
-    case ButtonTypes.Primary:
-    case ButtonTypes.Secondary:
-    case IconButtonTypes.Square:
-    case IconButtonTypes.SquareFilled:
-    case TextButtonTypes.Default:
-    case TextButtonTypes.AllCaps:
+  switch (variant) {
+    case ButtonVariant.Primary:
+    case ButtonVariant.Secondary:
+    case TextButtonVariant.Default:
+    case TextButtonVariant.AllCaps:
       return focusRing(2, 0);
-    case BetaButtonTypes.OutlineInverse:
+    case BetaButtonVariant.OutlineInverse:
       return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
-    case IconButtonTypes.Plain:
+    case IconButtonVariant.Plain:
       return focusRing(2);
-    case IconButtonTypes.Inverse:
-    case IconButtonTypes.InverseFilled:
-    case TextButtonTypes.Inverse:
-    case TextButtonTypes.InverseAllCaps:
+    case IconButtonVariant.Inverse:
+    case IconButtonVariant.InverseFilled:
+    case TextButtonVariant.Inverse:
+    case TextButtonVariant.InverseAllCaps:
       return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
@@ -490,0 +488,0 @@ default:

lib/types.ts

 /**
  * The different button sizes.
  */
-export enum ButtonSizes {
+export enum ButtonSize {
   Small = 'small',
@@ -10,2 +10,7 @@ Medium = 'medium',
 
+export enum IconButtonSize {
+  Small = 'small',
+  Medium = 'medium',
+}
+
 // TODO (beta button): consolidate all these button types
@@ -15,3 +20,3 @@ /**
  */
-export enum ButtonTypes {
+export enum ButtonVariant {
   Primary = 'primary',
@@ -22,3 +27,3 @@ Secondary = 'secondary',
 
-export enum BetaButtonTypes {
+export enum BetaButtonVariant {
   Primary = 'betaPrimary',
@@ -33,3 +38,3 @@ Secondary = 'betaSecondary',
 
-export enum IconButtonTypes {
+export enum IconButtonVariant {
   Square = 'square',
@@ -47,3 +52,3 @@ SquareFilled = 'squareFilled',
  */
-export enum IconPositions {
+export enum IconPosition {
   Left = 'iconPositionLeft',
@@ -53,3 +58,3 @@ Right = 'iconPositionRight',
 
-export enum TextButtonTypes {
+export enum TextButtonVariant {
   Default = 'text',
@@ -61,2 +66,6 @@ Inverse = 'textInverse',
 
-export type AllButtonTypes = ButtonTypes | BetaButtonTypes | TextButtonTypes | IconButtonTypes;
+export type AllButtonVariants =
+  | ButtonVariant
+  | BetaButtonVariant
+  | TextButtonVariant
+  | IconButtonVariant;

package.json

 {
   "name": "@workday/canvas-kit-react-button",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.7",
   "description": "A canvas-styled react button",
@@ -42,5 +42,5 @@ "author": "Workday, Inc. (https://www.workday.com)",
   "dependencies": {
-    "@workday/canvas-kit-react-common": "^3.0.0-alpha.6",
-    "@workday/canvas-kit-react-core": "^3.0.0-alpha.6",
-    "@workday/canvas-kit-react-icon": "^3.0.0-alpha.6",
+    "@workday/canvas-kit-react-common": "^3.0.0-alpha.7",
+    "@workday/canvas-kit-react-core": "^3.0.0-alpha.7",
+    "@workday/canvas-kit-react-icon": "^3.0.0-alpha.7",
     "@workday/canvas-system-icons-web": "^1.0.1",
@@ -51,3 +51,3 @@ "@workday/design-assets-types": "^0.2.3",
   },
-  "gitHead": "ff3ce05135cca365cf407db8c02bb1a592247200"
+  "gitHead": "d32722d081d80f8d33fceb8f6939d08e3e17f10a"
 }

README.md

@@ -12,4 +12,4 @@ # Canvas Kit Button
 >
-> The new buttons include new `ButtonTypes`, icon support, and the `ButtonSizes` equate to different
-> button and font sizes.
+> The new buttons include new `ButtonVariant`, icon support, and the `ButtonSize` equate to
+> different button and font sizes.
 >
@@ -42,6 +42,6 @@ > **If you would like to use the new buttons, please consult the design systems team and get
 
-#### `Sizes: ButtonSizes`
+#### `Sizes: ButtonSize`
 
 ```tsx
-<Button buttonSize={Button.Sizes.Small}>Small Button</Button>
+<Button size={Button.Size.Small}>Small Button</Button>
 ```
@@ -51,6 +51,6 @@
 
-#### `Types: ButtonTypes`
+#### `Types: ButtonVariant`
 
 ```tsx
-<Button buttonType={Button.Types.Primary}>Primary Button</Button>
+<Button variant={Button.Variant.Primary}>Primary Button</Button>
 ```
@@ -68,7 +68,7 @@
 
-#### `buttonType: ButtonTypes`
+#### `variant: ButtonVariant`
 
 > The type of the button
 
-Default: `ButtonTypes.Secondary`
+Default: `ButtonVariant.Secondary`
 
@@ -83,7 +83,7 @@ | Theme       | Description                     |
 
-#### `buttonSize: ButtonSizes`
+#### `size: ButtonSize`
 
 > The type of the button
 
-Default: `ButtonSizes.Large`
+Default: `ButtonSize.Large`
 
@@ -132,6 +132,6 @@ | Theme    | Description                            |
 
-#### `Sizes: ButtonSizes`
+#### `Sizes: ButtonSize`
 
 ```tsx
-<IconButton buttonSize={IconButton.Sizes.Small} icon={xIcon} />
+<IconButton size={IconButton.Size.Small} icon={xIcon} />
 ```
@@ -141,6 +141,6 @@
 
-#### `Types: IconButtonTypes`
+#### `Types: IconButtonVariant`
 
 ```tsx
-<IconButton buttonType={IconButton.Types.Plain} icon={xIcon} />
+<IconButton variant={IconButton.Variant.Plain} icon={xIcon} />
 ```
@@ -154,9 +154,17 @@
 
+### Required
+
+#### `aria-label: string`
+
+> The accessibility label to indicate the action triggered by clicking the icon button.
+
+---
+
 ### Optional
 
-#### `buttonType: IconButtonTypes`
+#### `variant: IconButtonVariant`
 
 > The type of the icon button
 
-Default: `IconButtonTypes.Circle`
+Default: `IconButtonVariant.Circle`
 
@@ -175,6 +183,8 @@ | Theme           | Description                                      |
 
-#### `buttonSize: IconButton.Sizes.Small | IconButton.Sizes.Medium`
+#### `size: ButtonSize.Small | ButtonSize.Medium`
 
 > The size of the icon button
 
+Default: `ButtonSize.Medium`
+
 | Theme                       | Description                   | Is Default |
@@ -181,0 +191,0 @@ | --------------------------- | ----------------------------- | ---------- |

No alert changes

Improved metrics

Total package byte prevSize

216810

3.45%

Lines of code

4747

3.99%

Number of lines in readme file

275

3.77%

Dependency changes

• Updated

  @workday/canvas-kit-react-common@^3.0.0-alpha.7

• Updated

  @workday/canvas-kit-react-core@^3.0.0-alpha.7

• Updated

  @workday/canvas-kit-react-icon@^3.0.0-alpha.7