diff --git a/CHANGELOG.md b/CHANGELOG.md
index 079f27ab2..1fa10b57b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,7 +24,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
     - Added the `igcStateChange` event, emitted after each render pass with a snapshot of the current virtual window (`startIndex`, `endIndex`, `viewportSize`, `totalSize`).
     - Added the `layoutComplete` property - a promise that resolves once the current render pass, and any follow-up renders triggered by item measurement, have fully settled.
     - Transparently degrades past the maximum scroll coordinate supported by the browser, so lists far larger than the DOM would normally allow keep scrolling and rendering correctly.
-
+- #### Chip
+  - Added the `outlined` property to the component. When set to `true`, the Chip will have an outlined style. [#2307](https://github.com/IgniteUI/igniteui-webcomponents/pull/2307)
 ### Changed
 - #### Combo
   - The dropdown list is now virtualized using the new `igc-virtual-scroll` component instead of the third-party `@lit-labs/virtualizer` package. [#2222](https://github.com/IgniteUI/igniteui-webcomponents/pull/2222)
@@ -33,6 +34,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Removed the `@lit-labs/virtualizer` dependency. Virtualization is now implemented internally by the new `igc-virtual-scroll` component. [#2222](https://github.com/IgniteUI/igniteui-webcomponents/pull/2222)
 - #### Carousel
   - The component now delegates focus, starting with its indicator container, navigation buttons, or the first focusable element in the active slide, whichever is available. Related to [#2291](https://github.com/IgniteUI/igniteui-webcomponents/issues/2291).
+- #### Chip
+  - The `focus-outline-color` and `focus-selected-outline-color` CSS variables were replaced with `focus-shadow-color` and `focus-selected-shadow-color`.
 
 ## [7.2.4] - 2026-06-29
 ### Added
diff --git a/package-lock.json b/package-lock.json
index d3b814c14..53c35ccd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "husky": "^9.1.7",
         "ig-typedoc-theme": "^7.0.1",
         "igniteui-i18n-resources": "^1.0.5",
-        "igniteui-theming": "^28.0.0-beta.1",
+        "igniteui-theming": "^28.0.0-beta.2",
         "keep-a-changelog": "^3.1.0",
         "lint-staged": "^17.3.0",
         "lit-analyzer": "^2.0.3",
@@ -7835,9 +7835,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "28.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-28.0.0-beta.1.tgz",
-      "integrity": "sha512-2Cd9h7uIBQPnDgBK+WNAltRVCJo/1K2D8byScgzqNQU2ekvd9zdgpa4Pycf7ygsmBR6c8pCMK9IjJDZL5nHx8Q==",
+      "version": "28.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-28.0.0-beta.2.tgz",
+      "integrity": "sha512-v6VLIyeLlZPrmkLkaFMrndVyort1TkI2bYp3pz5XclmOZ2tkI28qqtK1Vm6FiNbwQMJ3s8hfTXnurtu6CGyoIg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index fa083b041..95d5f880c 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-i18n-resources": "^1.0.5",
-    "igniteui-theming": "^28.0.0-beta.1",
+    "igniteui-theming": "^28.0.0-beta.2",
     "keep-a-changelog": "^3.1.0",
     "lint-staged": "^17.3.0",
     "lit-analyzer": "^2.0.3",
diff --git a/src/components/chip/chip.spec.ts b/src/components/chip/chip.spec.ts
index b4dbf7684..31f60120d 100644
--- a/src/components/chip/chip.spec.ts
+++ b/src/components/chip/chip.spec.ts
@@ -11,6 +11,13 @@ describe('Chip', () => {
     defineComponents(IgcChipComponent);
   });
 
+  it('passes the a11y audit', async () => {
+    const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
+
+    await expect(chip).shadowDom.to.be.accessible();
+    await expect(chip).to.be.accessible();
+  });
+
   it('should initialize with default values', async () => {
     const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
 
@@ -61,6 +68,20 @@ describe('Chip', () => {
     expect(chip).dom.to.equal('<igc-chip></igc-chip>', DIFF_OPTIONS);
   });
 
+  it('should toggle the outlined property successfully', async () => {
+    const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
+
+    chip.outlined = true;
+    expect(chip.outlined).to.be.true;
+    await elementUpdated(chip);
+    expect(chip).dom.to.equal('<igc-chip outlined></igc-chip>', DIFF_OPTIONS);
+
+    chip.outlined = false;
+    expect(chip.outlined).to.be.false;
+    await elementUpdated(chip);
+    expect(chip).dom.to.equal('<igc-chip></igc-chip>', DIFF_OPTIONS);
+  });
+
   it('should toggle the selectable property successfully', async () => {
     const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
 
diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
index c635f7817..08da13418 100644
--- a/src/components/chip/chip.ts
+++ b/src/components/chip/chip.ts
@@ -74,6 +74,14 @@ export default class IgcChipComponent extends EventEmitterMixin<
   @property({ type: Boolean, reflect: true })
   public removable = false;
 
+  /**
+   * Defines if the chip is outlined or not.
+   *
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public outlined = false;
+
   /**
    * Defines if the chip is selectable or not.
    * @attr
diff --git a/src/components/chip/themes/chip.base.scss b/src/components/chip/themes/chip.base.scss
index 327c7e95c..e0516f97e 100644
--- a/src/components/chip/themes/chip.base.scss
+++ b/src/components/chip/themes/chip.base.scss
@@ -13,7 +13,7 @@
     display: inline-flex;
     place-items: center;
     font-family: var(--ig-font-family);
-    border: rem(1px) solid;
+    border: none;
     box-shadow: none;
     cursor: pointer;
     padding: 0 pad-inline(rem(2px), rem(6px), rem(12px));
@@ -23,85 +23,63 @@
     }
 }
 
-:host([variant='primary']) button,
-:host([selected][variant='primary']) button:not([disabled]) {
-    background: color(primary, 500);
-    color: contrast-color(primary, 500);
-
-    &:focus {
-        background: color(primary, 800);
-        color: contrast-color(primary, 800);
-    }
-
-    &:hover {
-        background: color(primary, 600);
-        color: contrast-color(primary, 600);
-    }
-}
-
-:host([variant='info']) button,
-:host([selected][variant='info']) button:not([disabled]) {
-    background: color(info, 500);
-    color: contrast-color(info, 500);
-
-    &:focus {
-        background: color(info, 800);
-        color: contrast-color(info, 800);
+@mixin chip-variants($variant, $variant-color) {
+    :host([variant='#{$variant}']) button,
+    :host([selected][variant='#{$variant}']) button:not([disabled]) {
+        background: color($variant-color, 500);
+        color: contrast-color($variant-color, 500);
+
+        &:focus {
+            background: color($variant-color, 800);
+            color: contrast-color($variant-color, 800);
+        }
+
+        &:hover {
+            background: color($variant-color, 600);
+            color: contrast-color($variant-color, 600);
+        }
     }
 
-    &:hover {
-        background: color(info, 600);
-        color: contrast-color(info, 600);
+    :host([variant='#{$variant}']) button[disabled],
+    :host([selected][variant='#{$variant}']) button[disabled] {
+        background: color(gray, 200);
+        color: color(gray, 500);
     }
 }
 
-:host([variant='success']) button,
-:host([selected][variant='success']) button:not([disabled]) {
-    background: color(success, 500);
-    color: contrast-color(success, 500);
-
-    &:focus {
-        background: color(success, 800);
-        color: contrast-color(success, 800);
-    }
+@include chip-variants('primary', primary);
+@include chip-variants('info', info);
+@include chip-variants('success', success);
+@include chip-variants('warning', warn);
+@include chip-variants('danger', error);
 
-    &:hover {
-        background: color(success, 600);
-        color: contrast-color(success, 600);
-    }
-}
+@mixin outlined-variant($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        background: transparent;
 
-:host([variant='warning']) button,
-:host([selected][variant='warning']) button:not([disabled]) {
-    background: color(warn, 500);
-    color: contrast-color(warn, 500);
+        &:focus {
+            background: color($variant-color, 800, .30);
+        }
 
-    &:focus {
-        background: color(warn, 800);
-        color: contrast-color(warn, 800);
+        &:hover {
+            background: color($variant-color, 600, .16);
+        }
     }
 
-    &:hover {
-        background: color(warn, 600);
-        color: contrast-color(warn, 600);
+    :host([outlined][variant='#{$variant}']) button[disabled],
+    :host([selected][outlined][variant='#{$variant}']) button[disabled] {
+        background: color(gray, 200, .30);
+        color: color(gray, 500);
+        border-color: color(gray, 500, .30);
     }
 }
 
-:host([variant='danger']) button,
-:host([selected][variant='danger']) button:not([disabled]) {
-    background: color(error, 500);
-    color: contrast-color(error, 500);
-
-    &:focus {
-        background: color(error, 800);
-        color: contrast-color(error, 800);
-    }
-
-    &:hover {
-        background: color(error, 600);
-        color: contrast-color(error, 600);
-    }
-}
+@include outlined-variant('primary', primary);
+@include outlined-variant('info', info);
+@include outlined-variant('success', success);
+@include outlined-variant('warning', warn);
+@include outlined-variant('danger', error);
 
 [part='prefix'],
 [part='suffix'] {
diff --git a/src/components/chip/themes/dark/chip.bootstrap.scss b/src/components/chip/themes/dark/chip.bootstrap.scss
index 68cc3c7bb..fe7cecf57 100644
--- a/src/components/chip/themes/dark/chip.bootstrap.scss
+++ b/src/components/chip/themes/dark/chip.bootstrap.scss
@@ -7,3 +7,17 @@ $theme: $bootstrap;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 300);
+@include chip-outlined-variants-dark('info', info, 600);
+@include chip-outlined-variants-dark('success', success, 200);
+@include chip-outlined-variants-dark('warning', warn, 500);
+@include chip-outlined-variants-dark('danger', error, 400);
diff --git a/src/components/chip/themes/dark/chip.fluent.scss b/src/components/chip/themes/dark/chip.fluent.scss
index 679ee2e59..62bdb5ab4 100644
--- a/src/components/chip/themes/dark/chip.fluent.scss
+++ b/src/components/chip/themes/dark/chip.fluent.scss
@@ -7,3 +7,25 @@ $theme: $fluent;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade, $color-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color($variant-color, $color-shade);
+
+        &:focus {
+            background: color($variant-color, 800, .50);
+        }
+
+        &:hover {
+            background: color($variant-color, 600, .20);
+        }
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 200, 600);
+@include chip-outlined-variants-dark('info', info, 200, 500);
+@include chip-outlined-variants-dark('success', success, 100, 600);
+@include chip-outlined-variants-dark('warning', warn, 200, 500);
+@include chip-outlined-variants-dark('danger', error, 50, 600);
diff --git a/src/components/chip/themes/dark/chip.indigo.scss b/src/components/chip/themes/dark/chip.indigo.scss
index 17d3a2516..bfe2d3b8e 100644
--- a/src/components/chip/themes/dark/chip.indigo.scss
+++ b/src/components/chip/themes/dark/chip.indigo.scss
@@ -36,6 +36,11 @@ $theme: $indigo;
     }
 }
 
+:host([variant='warning']) button[disabled],
+:host([selected][variant='warning']) button[disabled] {
+    color: color(gray, 50);
+}
+
 :host([variant='danger']) button,
 :host([selected][variant='danger']) button:not([disabled]) {
     &:focus {
@@ -43,7 +48,42 @@ $theme: $indigo;
     }
 }
 
-:host([selected]) button[disabled],
-:host([variant='primary']) button[disabled] {
+:host([variant='primary']) button[disabled],
+:host([selected][variant='primary']) button[disabled] {
     color: contrast-color(primary, 900, .2);
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+
+        &:hover {
+            @if $variant == 'success' {
+                background: color($variant-color, 700, .30);
+            } @else if $variant == 'danger' {
+                background: color($variant-color, 500, .30);
+            } @else {
+                background: color($variant-color, 400, .30);
+            }
+        }
+
+        &:focus {
+            background: transparent;
+        }
+    }
+
+    :host([outlined][variant='#{$variant}']) button[disabled],
+    :host([selected][outlined][variant='#{$variant}']) button[disabled] {
+        background: transparent;
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 400);
+@include chip-outlined-variants-dark('info', info, 300);
+@include chip-outlined-variants-dark('success', success, 500);
+@include chip-outlined-variants-dark('warning', warn, 300);
+@include chip-outlined-variants-dark('danger', error, 400);
diff --git a/src/components/chip/themes/dark/chip.material.scss b/src/components/chip/themes/dark/chip.material.scss
index 0dddc23d0..e381f0e1b 100644
--- a/src/components/chip/themes/dark/chip.material.scss
+++ b/src/components/chip/themes/dark/chip.material.scss
@@ -7,3 +7,17 @@ $theme: $material;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 200);
+@include chip-outlined-variants-dark('info', info, 200);
+@include chip-outlined-variants-dark('success', success, 300);
+@include chip-outlined-variants-dark('warning', warn, 300);
+@include chip-outlined-variants-dark('danger', error, 300);
diff --git a/src/components/chip/themes/light/chip.bootstrap.scss b/src/components/chip/themes/light/chip.bootstrap.scss
index 8bade7490..5019f9aaf 100644
--- a/src/components/chip/themes/light/chip.bootstrap.scss
+++ b/src/components/chip/themes/light/chip.bootstrap.scss
@@ -6,3 +6,22 @@ $theme: $bootstrap;
 :host {
     @include css-vars-from-theme(diff($base, $theme));
 }
+
+@mixin chip-outlined-variants-light($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        color: contrast-color($variant-color, 100);
+
+        @if $variant == 'warning' or $variant == 'info' {
+            border-color: color($variant-color, 900);
+        } @else {
+            border-color: color($variant-color, 600);
+        }
+    }
+}
+
+@include chip-outlined-variants-light('primary', primary);
+@include chip-outlined-variants-light('info', info);
+@include chip-outlined-variants-light('success', success);
+@include chip-outlined-variants-light('warning', warn);
+@include chip-outlined-variants-light('danger', error);
diff --git a/src/components/chip/themes/light/chip.fluent.scss b/src/components/chip/themes/light/chip.fluent.scss
index 4d87074b4..98cb67258 100644
--- a/src/components/chip/themes/light/chip.fluent.scss
+++ b/src/components/chip/themes/light/chip.fluent.scss
@@ -6,3 +6,25 @@ $theme: $fluent;
 :host {
     @include css-vars-from-theme(diff($base, $theme));
 }
+
+@mixin chip-outlined-variants-light($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, 600);
+        color: contrast-color($variant-color, 100);
+
+        &:focus {
+            background: color($variant-color, 800, .30);
+        }
+
+        &:hover {
+            background: color($variant-color, 600, .16);
+        }
+    }
+}
+
+@include chip-outlined-variants-light('primary', primary);
+@include chip-outlined-variants-light('info', info);
+@include chip-outlined-variants-light('success', success);
+@include chip-outlined-variants-light('warning', warn);
+@include chip-outlined-variants-light('danger', error);
diff --git a/src/components/chip/themes/light/chip.indigo.scss b/src/components/chip/themes/light/chip.indigo.scss
index c0c07e6a2..77b372fde 100644
--- a/src/components/chip/themes/light/chip.indigo.scss
+++ b/src/components/chip/themes/light/chip.indigo.scss
@@ -35,6 +35,11 @@ $theme: $indigo;
     }
 }
 
+:host([variant='warning']) button[disabled],
+:host([selected][variant='warning']) button[disabled] {
+    color: color(gray, 900);
+}
+
 :host([variant='danger']) button,
 :host([selected][variant='danger']) button:not([disabled]) {
     &:focus {
@@ -42,7 +47,40 @@ $theme: $indigo;
     }
 }
 
-:host([selected]) button[disabled],
-:host([variant='primary']) button[disabled] {
+:host([variant='primary']) button[disabled],
+:host([selected][variant='primary']) button[disabled] {
     color: contrast-color(primary, 900, .4);
 }
+
+@mixin chip-outlined-variants-light($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: color(gray, 900);
+
+        &:hover {
+            @if $variant == 'info' or $variant == 'warning' {
+                background: color($variant-color, 400, .30);
+            } @else {
+                background: color($variant-color, $border-shade, .30);
+            }
+        }
+
+        &:focus {
+            background: transparent;
+        }
+    }
+
+    :host([outlined][variant='#{$variant}']) button[disabled],
+    :host([selected][outlined][variant='#{$variant}']) button[disabled] {
+        background: transparent;
+        border-color: color($variant-color, $border-shade);
+        color: color(gray, 900);
+    }
+}
+
+@include chip-outlined-variants-light('primary', primary, 400);
+@include chip-outlined-variants-light('info', info, 500);
+@include chip-outlined-variants-light('success', success, 700);
+@include chip-outlined-variants-light('warning', warn, 600);
+@include chip-outlined-variants-light('danger', error, 500);
diff --git a/src/components/chip/themes/light/chip.material.scss b/src/components/chip/themes/light/chip.material.scss
index 3271cfef8..8a6d48e7d 100644
--- a/src/components/chip/themes/light/chip.material.scss
+++ b/src/components/chip/themes/light/chip.material.scss
@@ -6,3 +6,17 @@ $theme: $material;
 :host {
     @include css-vars-from-theme(diff($base, $theme));
 }
+
+@mixin chip-outlined-variants-light($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, 800);
+        color: contrast-color($variant-color, 100);
+    }
+}
+
+@include chip-outlined-variants-light('primary', primary);
+@include chip-outlined-variants-light('info', info);
+@include chip-outlined-variants-light('success', success);
+@include chip-outlined-variants-light('warning', warn);
+@include chip-outlined-variants-light('danger', error);
diff --git a/src/components/chip/themes/shared/chip.bootstrap.scss b/src/components/chip/themes/shared/chip.bootstrap.scss
index a05d064ef..7f9769062 100644
--- a/src/components/chip/themes/shared/chip.bootstrap.scss
+++ b/src/components/chip/themes/shared/chip.bootstrap.scss
@@ -9,13 +9,13 @@ $theme: $bootstrap;
 
 :host button {
     &:focus {
-        outline: rem(4px) solid var-get($theme, 'focus-outline-color');
+        outline: rem(4px) solid var-get($theme, 'focus-shadow-color');
     }
 }
 
 :host([selected]) button:not([disabled]) {
     &:focus {
-        outline: rem(4px) solid var-get($theme, 'focus-selected-outline-color');
+        outline: rem(4px) solid var-get($theme, 'focus-selected-shadow-color');
     }
 }
 
@@ -23,7 +23,6 @@ $theme: $bootstrap;
     :host([variant='#{$variant}']) button,
     :host([selected][variant='#{$variant}']) button:not([disabled]) {
         color: contrast-color($variant-color, 700);
-        border-color: transparent;
 
         &:focus {
             background: color($variant-color, 500);
@@ -43,3 +42,24 @@ $theme: $bootstrap;
 @include chip-variants('success', success);
 @include chip-variants('warning', warn);
 @include chip-variants('danger', error);
+
+@mixin chip-outlined-variants($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        background: transparent;
+
+        &:hover {
+            background: color($variant-color, 600, .30);
+        }
+
+        &:focus {
+            background: transparent;
+        }
+    }
+}
+
+@include chip-outlined-variants('primary', primary);
+@include chip-outlined-variants('info', info);
+@include chip-outlined-variants('success', success);
+@include chip-outlined-variants('warning', warn);
+@include chip-outlined-variants('danger', error);
diff --git a/src/components/chip/themes/shared/chip.common.scss b/src/components/chip/themes/shared/chip.common.scss
index 18428b3d5..269c9a3c5 100644
--- a/src/components/chip/themes/shared/chip.common.scss
+++ b/src/components/chip/themes/shared/chip.common.scss
@@ -12,7 +12,6 @@ $theme: $material;
     border-radius: var-get($theme, 'border-radius');
     background: var-get($theme, 'background');
     color: var-get($theme, 'text-color');
-    border-color: var-get($theme, 'border-color');
     outline: none;
     height: var-get($theme, 'size');
 
@@ -23,19 +22,16 @@ $theme: $material;
     &:focus {
         background: var-get($theme, 'focus-background');
         color: var-get($theme, 'focus-text-color');
-        border-color: var-get($theme, 'focus-border-color');
     }
 
     &:hover {
         background: var-get($theme, 'hover-background');
         color: var-get($theme, 'hover-text-color');
-        border-color: var-get($theme, 'hover-border-color');
     }
 
     &[disabled] {
         background: var-get($theme, 'disabled-background');
         color: var-get($theme, 'disabled-text-color');
-        border-color: var-get($theme, 'disabled-border-color');
     }
 
     ::slotted([slot="remove"]) {
@@ -84,17 +80,67 @@ $theme: $material;
 :host([selected]) button:not([disabled]) {
     background: var-get($theme, 'selected-background');
     color: var-get($theme, 'selected-text-color');
-    border-color: var-get($theme, 'selected-border-color');
 
     &:focus {
         background: var-get($theme, 'focus-selected-background');
         color: var-get($theme, 'focus-selected-text-color');
-        border-color: var-get($theme, 'focus-selected-border-color');
     }
 
     &:hover {
         background: var-get($theme, 'hover-selected-background');
         color: var-get($theme, 'hover-selected-text-color');
+    }
+}
+
+:host([selected]) button[disabled] {
+    background: var-get($theme, 'disabled-selected-background');
+    color: var-get($theme, 'disabled-selected-text-color');
+}
+
+:host([outlined]) button {
+    background: var-get($theme, 'outlined-background');
+    color: var-get($theme, 'outlined-text-color');
+    border: rem(1px) solid var-get($theme, 'border-color');
+
+    &:focus {
+        background: var-get($theme, 'focus-outlined-background');
+        color: var-get($theme, 'focus-outlined-text-color');
+        border-color: var-get($theme, 'focus-border-color');
+    }
+
+    &:hover {
+        background: var-get($theme, 'hover-outlined-background');
+        color: var-get($theme, 'hover-outlined-text-color');
+        border-color: var-get($theme, 'hover-border-color');
+    }
+
+    &[disabled] {
+        background: var-get($theme, 'disabled-outlined-background');
+        color: var-get($theme, 'disabled-outlined-text-color');
+        border-color: var-get($theme, 'disabled-border-color');
+    }
+}
+
+:host([selected][outlined]) button:not([disabled]) {
+    background: var-get($theme, 'selected-outlined-background');
+    color: var-get($theme, 'selected-outlined-text-color');
+    border-color: var-get($theme, 'selected-border-color');
+
+    &:focus {
+        background: var-get($theme, 'focus-selected-outlined-background');
+        color: var-get($theme, 'focus-selected-outlined-text-color');
+        border-color: var-get($theme, 'focus-selected-border-color');
+    }
+
+    &:hover {
+        background: var-get($theme, 'hover-selected-outlined-background');
+        color: var-get($theme, 'hover-selected-outlined-text-color');
         border-color: var-get($theme, 'hover-selected-border-color');
     }
 }
+
+:host([selected][outlined]) button[disabled] {
+    background: var-get($theme, 'disabled-selected-outlined-background');
+    color: var-get($theme, 'disabled-selected-outlined-text-color');
+    border-color: var-get($theme, 'disabled-selected-border-color');
+}
diff --git a/src/components/chip/themes/shared/chip.fluent.scss b/src/components/chip/themes/shared/chip.fluent.scss
index f45a4c39d..2c3b77326 100644
--- a/src/components/chip/themes/shared/chip.fluent.scss
+++ b/src/components/chip/themes/shared/chip.fluent.scss
@@ -10,3 +10,16 @@ $theme: $fluent;
 :host button {
     @include type-style('subtitle-2');
 }
+
+@mixin chip-outlined-variants($variant) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        background: transparent;
+    }
+}
+
+@include chip-outlined-variants('primary');
+@include chip-outlined-variants('info');
+@include chip-outlined-variants('success');
+@include chip-outlined-variants('warning');
+@include chip-outlined-variants('danger');
diff --git a/src/components/chip/themes/shared/chip.indigo.scss b/src/components/chip/themes/shared/chip.indigo.scss
index 9f9b3f00b..e6d1a9852 100644
--- a/src/components/chip/themes/shared/chip.indigo.scss
+++ b/src/components/chip/themes/shared/chip.indigo.scss
@@ -11,7 +11,7 @@ $theme: $indigo;
     padding: 0 pad-inline(3px, 5px, 7px);
 
     &:focus {
-        box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
+        box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-shadow-color');
     }
 
     igc-icon,
@@ -23,22 +23,18 @@ $theme: $indigo;
 :host([selected]) button:not([disabled]) {
     color: var-get($theme, 'selected-text-color');
     background: var-get($theme, 'selected-background');
-    border-color: transparent;
 
     &:focus {
-        box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color');
+        box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-selected-shadow-color');
     }
 }
 
 :host([selected]) button[disabled] {
-    background: color($color: 'primary', $variant: 400, $opacity: .5);
-    border-color: transparent;
+    opacity: .4;
 }
 
 :host([variant='primary']) button,
 :host([selected][variant='primary']) button:not([disabled]) {
-    border-color: transparent;
-
     &:focus {
         color: contrast-color(primary, 900);
         background: color(primary, 500);
@@ -51,7 +47,8 @@ $theme: $indigo;
     }
 }
 
-:host([variant='primary']) button[disabled] {
+:host([variant='primary']) button[disabled],
+:host([selected][variant='primary']) button[disabled] {
     background: color(primary, 400, .5);
 }
 
@@ -68,8 +65,6 @@ $theme: $indigo;
             background: color(error, 600);
         }
 
-        border-color: transparent;
-
         &:focus {
             @if $variant == 'warning' or $variant == 'info' {
                 background: color($variant-color, 500);
@@ -97,11 +92,22 @@ $theme: $indigo;
         }
     }
 
-    :host([variant='#{$variant}']) button[disabled] {
+    :host([variant='#{$variant}']) button[disabled],
+    :host([selected][variant='#{$variant}']) button[disabled] {
+        @if $variant != 'primary' {
+            opacity: .4;
+        }
+
         @if $variant != 'warning' {
             color: contrast-color($variant-color, 900);
         }
 
+        @if $variant == 'success' {
+            background: color(success, 800);
+        } @else if $variant == 'danger' {
+            background: color(error, 600);
+        }
+
         @if $variant == 'warning' or $variant == 'info' {
             background: color($variant-color, 500);
         }
@@ -113,11 +119,6 @@ $theme: $indigo;
 @include chip-variants('warning', warn);
 @include chip-variants('danger', error);
 
-:host([variant='info']),
-:host([variant='success']),
-:host([variant='warning']),
-:host([variant='danger']) {
-    button[disabled] {
-        opacity: .4;
-    }
+:host([outlined][variant='primary']) button[disabled] {
+    opacity: .4;
 }
diff --git a/stories/chip.stories.ts b/stories/chip.stories.ts
index 92a5693ca..20cd3cf78 100644
--- a/stories/chip.stories.ts
+++ b/stories/chip.stories.ts
@@ -33,6 +33,12 @@ const metadata: Meta<IgcChipComponent> = {
       control: 'boolean',
       table: { defaultValue: { summary: 'false' } },
     },
+    outlined: {
+      type: 'boolean',
+      description: 'Defines if the chip is outlined or not.',
+      control: 'boolean',
+      table: { defaultValue: { summary: 'false' } },
+    },
     selectable: {
       type: 'boolean',
       description: 'Defines if the chip is selectable or not.',
@@ -62,6 +68,7 @@ const metadata: Meta<IgcChipComponent> = {
   args: {
     disabled: false,
     removable: false,
+    outlined: false,
     selectable: false,
     selected: false,
   },
@@ -74,6 +81,8 @@ interface IgcChipArgs {
   disabled: boolean;
   /** Defines if the chip is removable or not. */
   removable: boolean;
+  /** Defines if the chip is outlined or not. */
+  outlined: boolean;
   /** Defines if the chip is selectable or not. */
   selectable: boolean;
   /** Defines if the chip is selected or not. */
@@ -99,6 +108,7 @@ export const Basic: Story = {
   render: ({
     disabled,
     removable,
+    outlined,
     selectable,
     selected,
     variant,
@@ -108,6 +118,7 @@ export const Basic: Story = {
       .removable=${removable}
       .selectable=${selectable}
       .selected=${selected}
+      .outlined=${outlined}
       variant=${ifDefined(variant)}
     >
       <span slot="prefix">😱</span>
@@ -128,6 +139,7 @@ export const Variants: Story = {
     },
   },
   render: () => html`
+    <h4 style="margin: 0 0 0 1rem">Default</h4>
     <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem;">
       <igc-chip>Default</igc-chip>
       <igc-chip variant="primary">Primary</igc-chip>
@@ -136,6 +148,15 @@ export const Variants: Story = {
       <igc-chip variant="warning">Warning</igc-chip>
       <igc-chip variant="danger">Danger</igc-chip>
     </div>
+    <h4 style="margin: 1rem 0 0 1rem">Outlined</h4>
+    <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem;">
+      <igc-chip outlined>Default</igc-chip>
+      <igc-chip variant="primary" outlined>Primary</igc-chip>
+      <igc-chip variant="info" outlined>Info</igc-chip>
+      <igc-chip variant="success" outlined>Success</igc-chip>
+      <igc-chip variant="warning" outlined>Warning</igc-chip>
+      <igc-chip variant="danger" outlined>Danger</igc-chip>
+    </div>
   `,
 };
 
@@ -257,13 +278,14 @@ export const States: Story = {
     docs: {
       description: {
         story:
-          'Visual overview of chip states: default, selected, disabled, disabled+selected, removable, and selectable.',
+          'Visual overview of chip states: default, outlined, selected, disabled, disabled+selected, removable, and selectable.',
       },
     },
   },
   render: () => html`
     <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem;">
       <igc-chip>Default</igc-chip>
+      <igc-chip outlined>Outlined</igc-chip>
       <igc-chip selectable selected>Selected</igc-chip>
       <igc-chip disabled>Disabled</igc-chip>
       <igc-chip selectable selected disabled>Disabled &amp; Selected</igc-chip>