diff --git a/packages/fuselage/src/components/Tag/Tag.stories.tsx b/packages/fuselage/src/components/Tag/Tag.stories.tsx
index b3896ac4a8..d6851d724f 100644
--- a/packages/fuselage/src/components/Tag/Tag.stories.tsx
+++ b/packages/fuselage/src/components/Tag/Tag.stories.tsx
@@ -50,15 +50,6 @@ Secondary.args = {
variant: 'secondary',
};
-export const WithIcon = Template.bind({});
-WithIcon.args = {
- children: (
- <>
- Team
- >
- ),
-};
-
export const _Danger = Template.bind({});
_Danger.args = {
variant: 'danger',
@@ -73,6 +64,17 @@ Warning.args = {
variant: 'warning',
};
+export const Featured = Template.bind({});
+Featured.args = {
+ variant: 'featured',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+ icon: ,
+ children: 'Team',
+};
+
export const Disabled = Template.bind({});
Disabled.args = {
disabled: true,
diff --git a/packages/fuselage/src/components/Tag/Tag.styles.scss b/packages/fuselage/src/components/Tag/Tag.styles.scss
index bbfdb281ec..3134f035e7 100644
--- a/packages/fuselage/src/components/Tag/Tag.styles.scss
+++ b/packages/fuselage/src/components/Tag/Tag.styles.scss
@@ -84,6 +84,19 @@ $tag-colors-warning-hover-background-color: theme(
colors.button(warning-hover)
);
+$tag-colors-featured-color: theme(
+ 'tag-colors-featured-color',
+ colors.button(on-primary)
+);
+$tag-colors-featured-background-color: theme(
+ 'tag-colors-featured-background-color',
+ colors.surface(featured)
+);
+$tag-colors-featured-hover-background-color: theme(
+ 'tag-colors-featured-hover-background-color',
+ colors.surface(featured-hover)
+);
+
$tag-colors-disabled-color: theme(
'tag-colors-disabled-color',
colors.font(secondary-info)
@@ -185,6 +198,18 @@ $tag-colors-disabled-background-color: theme(
}
}
+ &--featured {
+ color: $tag-colors-featured-color;
+ background-color: $tag-colors-featured-background-color;
+
+ &.rcx-tag--clickable {
+ &:hover {
+ color: $tag-colors-featured-color;
+ background-color: $tag-colors-featured-hover-background-color;
+ }
+ }
+ }
+
&--disabled {
cursor: not-allowed;