diff --git a/packages/lib/src/file-input/FileItem.tsx b/packages/lib/src/file-input/FileItem.tsx
index c909a48a4..dab91a72e 100644
--- a/packages/lib/src/file-input/FileItem.tsx
+++ b/packages/lib/src/file-input/FileItem.tsx
@@ -5,6 +5,8 @@ import useTheme from "../useTheme";
import useTranslatedLabels from "../useTranslatedLabels";
import { FileItemProps } from "./types";
import DxcIcon from "../icon/Icon";
+import DxcTooltip from "../tooltip/Tooltip";
+import DxcActionIcon from "../action-icon/ActionIcon";
const FileItem = ({
fileName = "",
@@ -44,17 +46,12 @@ const FileItem = ({
)}
- {
- onDelete(fileName);
- }}
- type="button"
- title={translatedLabels.fileInput.deleteFileActionTitle}
- aria-label={translatedLabels.fileInput.deleteFileActionTitle}
+ onDelete(fileName)}
+ icon="close"
tabIndex={tabIndex}
- >
-
-
+ title={translatedLabels.fileInput.deleteFileActionTitle}
+ />
{error && !singleFileMode && (
@@ -145,36 +142,6 @@ const ErrorIcon = styled.span`
color: #d0011b;
`;
-const DeleteFileAction = styled.button`
- display: flex;
- flex-wrap: wrap;
- align-content: center;
- justify-content: center;
- height: 24px;
- width: 24px;
- font-size: 1rem;
- font-family: ${(props) => props.theme.fontFamily};
- border: 1px solid transparent;
- border-radius: 2px;
- background-color: transparent;
- box-shadow: 0 0 0 2px transparent;
- padding: 3px;
- cursor: pointer;
- color: ${(props) => props.theme.deleteFileItemColor};
- font-size: 18px;
- &:hover {
- background-color: ${(props) => props.theme.hoverDeleteFileItemBackgroundColor};
- }
- &:focus,
- &:focus-visible {
- outline: none;
- box-shadow: 0 0 0 2px ${(props) => props.theme.focusDeleteFileItemBorderColor};
- }
- &:active {
- background-color: ${(props) => props.theme.activeDeleteFileItemBackgroundColor};
- }
-`;
-
const ErrorMessage = styled.span`
color: ${(props) => props.theme.errorMessageFontColor};
font-family: ${(props) => props.theme.errorMessageFontFamily};