DocSpace-client/packages/shared/components/icon-button
2024-03-18 12:54:09 +03:00
..
IconButton.stories.tsx Shared: apply yarn eslint:fix 2024-03-18 12:54:09 +03:00
IconButton.styled.ts Shared: apply yarn eslint:fix 2024-03-18 12:54:09 +03:00
IconButton.test.tsx Shared: apply yarn eslint:fix 2024-03-18 12:54:09 +03:00
IconButton.tsx Shared: apply yarn eslint:fix 2024-03-18 12:54:09 +03:00
IconButton.types.ts Shared: apply yarn eslint:fix 2024-03-18 12:54:09 +03:00
index.tsx Shared: apply yarn eslint:fix 2024-03-18 12:54:09 +03:00
README.md Client: fix wrong import - export for shared components 2024-01-10 11:01:43 +03:00

IconButton

IconButton is used for a action on a page

Usage

import { IconButton } from "@docspace/shared/components/icon-button";
import SearchReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";
<IconButton
  size="25"
  isDisabled={false}
  onClick={() => alert("Clicked")}
  iconName={SearchReactSvgUrl}
  isFill={true}
  isClickable={false}
/>

Properties

Props Type Required Values Default Description
className string - - - Set component class
clickColor string - - - Icon color on click action
color string - - #d0d5da Icon color
hoverColor string - - - Icon color on hover action
iconClickName string - - - Icon name on click action
iconHoverName string - - - Icon name on hover action
iconName string - AZSortingIcon Icon name
id string, number - - - Set component id
isClickable bool - - false Set cursor value
isDisabled bool - - false Tells when the button should present a disabled state
isFill bool - - true Determines if icon fill is needed
onClick func - - - What the button will trigger when clicked
onMouseDown func - - - What the button will trigger when cursor down
onMouseEnter func - - - What the button will trigger when cursor enter
onMouseUp func - - - What the button will trigger when cursor up
size number,string - - 25 Button height and width value
style obj, array - - - Accepts css style