diff --git a/gallery/src/demos/demo-ha-chip.ts b/gallery/src/demos/demo-ha-chip.ts
index e2b51c1226..d7a8eecffd 100644
--- a/gallery/src/demos/demo-ha-chip.ts
+++ b/gallery/src/demos/demo-ha-chip.ts
@@ -119,7 +119,7 @@ export class DemoHaChip extends LitElement {
({ ...chip, outline: true }))}
+ .items=${chips.map((chip) => ({ ...chip, outlined: true }))}
>
diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts
index c7f78a5120..b74609fd55 100644
--- a/src/components/ha-chip-set.ts
+++ b/src/components/ha-chip-set.ts
@@ -23,7 +23,7 @@ export interface HaChipSetItem {
label?: string;
leadingIcon?: string;
trailingIcon?: string;
- outline?: boolean;
+ outlined?: boolean;
}
@customElement("ha-chip-set")
@@ -43,7 +43,7 @@ export class HaChipSet extends LitElement {
.label=${item.label}
.leadingIcon=${item.leadingIcon}
.trailingIcon=${item.trailingIcon}
- ?outline=${item.outline}
+ ?outlined=${item.outlined}
>
`
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index e0e183e17e..dfdec923ca 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -69,8 +69,9 @@ export class HaChip extends LitElement {
}
.mdc-chip.outlined {
+ margin: 0 -2px !important;
border: 2px solid var(--ha-chip-background-color, var(--primary-color));
- background: var(
+ background-color: var(
--ha-chip-outlined-background-color,
var(--card-background-color)
);
@@ -79,7 +80,6 @@ export class HaChip extends LitElement {
.mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading {
margin-left: -12px !important;
- margin-right: -2px !important;
}
.mdc-chip.outlined ha-svg-icon,