diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index eec75790d3..5acff1a427 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -750,6 +750,10 @@ export namespace Components {
* Display an outline style button.
*/
"outline": boolean;
+ /**
+ * Set to 'rectangular' for a chip with sharp corners.
+ */
+ "shape"?: 'soft' | 'round' | 'rectangular';
/**
* The theme determines the visual appearance of the component.
*/
@@ -5978,6 +5982,10 @@ declare namespace LocalJSX {
* Display an outline style button.
*/
"outline"?: boolean;
+ /**
+ * Set to 'rectangular' for a chip with sharp corners.
+ */
+ "shape"?: 'soft' | 'round' | 'rectangular';
/**
* The theme determines the visual appearance of the component.
*/
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
index 1cad0a811e..258f3789bf 100644
--- a/core/src/components/chip/chip.ionic.scss
+++ b/core/src/components/chip/chip.ionic.scss
@@ -9,13 +9,14 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
:host {
--background: #{tokens.$ionic-color-neutral-10};
--border-color: transparent;
+ --border-radius: #{tokens.$ionic-border-radius-rounded-large};
--color: #{tokens.$ionic-color-neutral-900};
--focus-ring-color: #{$ionic-states-focus-primary};
--focus-ring-width: #{tokens.$ionic-border-size-medium};
@include mixins.font-smoothing;
@include mixins.padding(tokens.$ionic-space-xs, tokens.$ionic-space-xxs);
- @include mixins.border-radius(tokens.$ionic-border-radius-rounded-large);
+ @include mixins.border-radius(var(--border-radius));
display: inline-flex;
@@ -75,3 +76,16 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
opacity: 0.6;
pointer-events: none;
}
+
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+ --border-radius: #{tokens.$ionic-border-radius-rounded-small};
+}
+:host(.chip-round) {
+ --border-radius: #{tokens.$ionic-border-radius-rounded-large};
+}
+:host(.chip-rectangular) {
+ --border-radius: #{tokens.$ionic-border-radius-square};
+}
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index a85333512d..b3e946f842 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -36,7 +36,13 @@ export class Chip implements ComponentInterface {
*/
@Prop() disabled = false;
+ /**
+ * Set to 'rectangular' for a chip with sharp corners.
+ */
+ @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular';
+
render() {
+ const { shape } = this;
const theme = getIonTheme(this);
return (
@@ -44,6 +50,7 @@ export class Chip implements ComponentInterface {
aria-disabled={this.disabled ? 'true' : null}
class={createColorClasses(this.color, {
[theme]: true,
+ [`chip-${shape}`]: shape !== undefined,
'chip-outline': this.outline,
'chip-disabled': this.disabled,
'ion-activatable': true,
diff --git a/core/src/components/chip/test/theme-ionic/index.html b/core/src/components/chip/test/theme-ionic/index.html
index 05f944345e..c0f6b7b65b 100644
--- a/core/src/components/chip/test/theme-ionic/index.html
+++ b/core/src/components/chip/test/theme-ionic/index.html
@@ -50,6 +50,19 @@
+