diff --git a/src/harmony/Tag/Tag.module.css b/src/harmony/Tag/Tag.module.css
index bbb41cbe..8c2b7af6 100644
--- a/src/harmony/Tag/Tag.module.css
+++ b/src/harmony/Tag/Tag.module.css
@@ -13,7 +13,7 @@
transition: color 200ms ease-in;
}
-.Tag:not(:has(.Button)) {
+.Tag_interactive {
padding-right: var(--gap-sm);
}
diff --git a/src/harmony/Tag/Tag.stories.tsx b/src/harmony/Tag/Tag.stories.tsx
index bd3b9d64..9abf1804 100644
--- a/src/harmony/Tag/Tag.stories.tsx
+++ b/src/harmony/Tag/Tag.stories.tsx
@@ -22,25 +22,30 @@ export const TagsList = () => {
{tags.map((tag) => (
-
+ }>
{tag}
-
))}
{tags.map((tag) => (
- {} : undefined}>
+ {} : undefined}
+ action={tag.length <= 5 && }
+ >
{tag}
- {tag.length <= 5 && }
))}
{tags.map((tag) => (
- {} : undefined}>
+ {} : undefined}
+ action={tag.length <= 5 && }
+ >
{tag}
- {tag.length <= 5 && }
))}
diff --git a/src/harmony/Tag/Tag.tsx b/src/harmony/Tag/Tag.tsx
index 46ff2be8..4eb2e0ea 100644
--- a/src/harmony/Tag/Tag.tsx
+++ b/src/harmony/Tag/Tag.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, HTMLAttributes, MouseEvent, useCallback } from 'react';
+import React, { ComponentProps, HTMLAttributes, MouseEvent, ReactNode, useCallback } from 'react';
import cn from 'classnames';
import { IconXSmallOutline } from '@taskany/icons';
@@ -33,12 +33,18 @@ export const TagCleanButton = ({
);
};
-interface TagProps extends HTMLAttributes {}
+interface TagProps extends HTMLAttributes {
+ action?: ReactNode;
+}
-export const Tag = ({ className, children, ...props }: TagProps) => {
+export const Tag = ({ className, children, action, ...props }: TagProps) => {
return (
-
+
{children}
+ {action}
);
};