diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss
index 022cad5fe239..89ff872fec53 100644
--- a/src/dev-app/chips/chips-demo.scss
+++ b/src/dev-app/chips/chips-demo.scss
@@ -18,7 +18,7 @@
}
.mat-mdc-basic-chip {
- margin: auto 10px;
+ margin: 8px 10px;
}
mat-chip-grid input {
diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html
index a24ad97fd148..7d150b49e644 100644
--- a/src/material/chips/chip-option.html
+++ b/src/material/chips/chip-option.html
@@ -27,6 +27,7 @@
+
diff --git a/src/material/chips/chip-row.html b/src/material/chips/chip-row.html
index c1715e7e4344..55ed032a3186 100644
--- a/src/material/chips/chip-row.html
+++ b/src/material/chips/chip-row.html
@@ -31,6 +31,7 @@
+
@if (_hasTrailingIcon()) {
diff --git a/src/material/chips/chip-set.scss b/src/material/chips/chip-set.scss
index 3538a9daed9d..87d59ab63fe1 100644
--- a/src/material/chips/chip-set.scss
+++ b/src/material/chips/chip-set.scss
@@ -16,7 +16,7 @@
}
.mdc-evolution-chip {
- margin: 4px 0 4px 8px;
+ margin: 8px 0 8px 8px;
}
[dir='rtl'] & {
diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html
index be514ac35fc8..1d9eb6efd943 100644
--- a/src/material/chips/chip.html
+++ b/src/material/chips/chip.html
@@ -11,6 +11,7 @@
+
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index 6324868ef8f6..822686a2e6b5 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -12,6 +12,8 @@ $_graphic-padding: 6px;
$_trailing-action-padding: 8px;
$_avatar-leading-padding: 4px;
$_avatar-trailing-padding: 8px;
+$_touch-target-size: 48px;
+$_touch-target-vertical-padding: 8px;
$fallbacks: m3-chip.get-tokens();
@@ -27,6 +29,27 @@ $fallbacks: m3-chip.get-tokens();
max-width: 100%;
}
+.mat-mdc-standard-chip,
+.mat-mdc-basic-chip,
+.mat-mdc-evolution-chip {
+ // Ensures basic/unstyled chips also have a 32px min-height baseline.
+ min-height: 32px;
+
+ // 8px top and bottom margin for 48px touch target separation.
+ margin-top: $_touch-target-vertical-padding;
+ margin-bottom: $_touch-target-vertical-padding;
+}
+
+.mat-mdc-chip-touch-target {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: $_touch-target-size;
+ transform: translateY(-50%);
+ pointer-events: auto;
+}
+
.mdc-evolution-chip__cell,
.mdc-evolution-chip__action {
height: 100%;