diff --git a/packages/carbon-react/src/components/Tag/Tag.stories.js b/packages/carbon-react/src/components/Tag/Tag.stories.js
index 210cb6c976b6..276852248d96 100644
--- a/packages/carbon-react/src/components/Tag/Tag.stories.js
+++ b/packages/carbon-react/src/components/Tag/Tag.stories.js
@@ -42,6 +42,30 @@ export const Default = () => {
{'Tag content'}
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
>
);
};
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index aebc18cc0c7e..d3e37e74e4d1 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -130,6 +130,12 @@
@include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
}
+ .#{$prefix}--tag--outline {
+ @include tag-theme($background, $text-01, $hover-ui);
+
+ box-shadow: inset 0 0 0 1px $inverse-02;
+ }
+
.#{$prefix}--tag--disabled,
.#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
.#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 41704553c0ba..3b5291ca8ca5 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6040,6 +6040,7 @@ Map {
"cool-gray",
"warm-gray",
"high-contrast",
+ "outline",
],
],
"type": "oneOf",
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index a9bb8b5ff47e..bba6f9ae81f7 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -25,6 +25,7 @@ const TYPES = {
'cool-gray': 'Cool-Gray',
'warm-gray': 'Warm-Gray',
'high-contrast': 'High-Contrast',
+ outline: 'Outline',
};
const Tag = ({
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index afae0067527d..cc599c9c91ab 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -114,6 +114,12 @@
);
}
+ .#{$prefix}--tag--outline {
+ @include tag-theme($background, $text-primary, $layer-hover);
+
+ box-shadow: inset 0 0 0 1px $background-inverse;
+ }
+
.#{$prefix}--tag--disabled,
.#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
.#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {