diff --git a/core/src/components.d.ts b/core/src/components.d.ts index b65b235063..59ef8a3dde 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -836,14 +836,14 @@ declare global { * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ 'mode': Mode; - /** - * If true, activates a button with rounded corners. - */ - 'round': boolean; /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection': 'forward' | 'back'; + /** + * The button shape. Possible values are: `"round"`. + */ + 'shape': 'round'; /** * The button size. Possible values are: `"small"`, `"default"`, `"large"`. */ @@ -914,14 +914,14 @@ declare global { * Emitted when the button has focus. */ 'onIonFocus'?: (event: CustomEvent) => void; - /** - * If true, activates a button with rounded corners. - */ - 'round'?: boolean; /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection'?: 'forward' | 'back'; + /** + * The button shape. Possible values are: `"round"`. + */ + 'shape'?: 'round'; /** * The button size. Possible values are: `"small"`, `"default"`, `"large"`. */ diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 0749630a23..e800a9ec6a 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -68,9 +68,10 @@ export class Button { @Prop() href?: string; /** - * If true, activates a button with rounded corners. + * The button shape. + * Possible values are: `"round"`. */ - @Prop() round = false; + @Prop() shape?: 'round'; /** * The button size. @@ -120,14 +121,14 @@ export class Button { } protected render() { - const { buttonType, color, expand, fill, mode, round, size, strong } = this; + const { buttonType, color, expand, fill, mode, shape, size, strong } = this; const TagType = this.href ? 'a' : 'button'; const buttonClasses = { ...getButtonClassMap(buttonType, mode), ...getButtonTypeClassMap(buttonType, expand, mode), ...getButtonTypeClassMap(buttonType, size, mode), - ...getButtonTypeClassMap(buttonType, round ? 'round' : undefined, mode), + ...getButtonTypeClassMap(buttonType, shape, mode), ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode), ...getColorClassMap(buttonType, color, fill, mode), ...getElementClassMap(this.el.classList), diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md index 837b817543..9c2fa2b93d 100644 --- a/core/src/components/button/readme.md +++ b/core/src/components/button/readme.md @@ -95,13 +95,6 @@ Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). -#### round - -boolean - -If true, activates a button with rounded corners. - - #### routerDirection string @@ -110,6 +103,14 @@ When using a router, it specifies the transition direction when navigating to another page using `href`. +#### shape + +string + +The button shape. +Possible values are: `"round"`. + + #### size string @@ -194,13 +195,6 @@ Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). -#### round - -boolean - -If true, activates a button with rounded corners. - - #### router-direction string @@ -209,6 +203,14 @@ When using a router, it specifies the transition direction when navigating to another page using `href`. +#### shape + +string + +The button shape. +Possible values are: `"round"`. + + #### size string diff --git a/core/src/components/button/test/expand/index.html b/core/src/components/button/test/expand/index.html index c3176d198d..166adc1a19 100644 --- a/core/src/components/button/test/expand/index.html +++ b/core/src/components/button/test/expand/index.html @@ -37,8 +37,8 @@ Full + Large

- Block + Round - Full + Round + Block + Round + Full + Round

diff --git a/core/src/components/button/test/round/index.html b/core/src/components/button/test/round/index.html index f17835b034..f332be3786 100644 --- a/core/src/components/button/test/round/index.html +++ b/core/src/components/button/test/round/index.html @@ -16,32 +16,32 @@ - Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark - Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark - Clear - Block - Full - Strong + Clear + Block + Full + Strong diff --git a/core/src/components/button/test/strong/index.html b/core/src/components/button/test/strong/index.html index 1e3a4774f4..2300deef21 100644 --- a/core/src/components/button/test/strong/index.html +++ b/core/src/components/button/test/strong/index.html @@ -21,7 +21,7 @@

Clear

Block

Full

-

Strong

+

Strong