DocSpace-client/packages/shared/components/context-menu-button/README.md

ContextMenuButton

ContextMenuButton is used for displaying context menu actions on a list's item

Usage

import { ContextMenuButton } from "@docspace/shared/components/context-menu-button";
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";

<ContextMenuButton
  iconName={VerticalDotsReactSvgUrl}
  size={16}
  color="#A3A9AE"
  isDisabled={false}
  title="Actions"
  getData={() => [
    {
      key: "key",
      label: "label",
      onClick: () => alert("label"),
    },
  ]}
/>

Properties

Props	Type	Required	Values	Default	Description
className	string	-	-	-	Accepts class
clickColor	string	-	-	-	Specifies the icon click color
color	string	-	-	-	Specifies the icon color
data	array	-	-	[ ]	Array of options for display
directionX	oneOf	-	left,right	left	What the button will trigger when mouse out of button
getData	func	✅	-	-	Function for converting to inner data
hoverColor	string	-	-	-	Specifies the icon hover color
iconClickName	string	-	-	-	Specifies the icon click name
iconHoverName	string	-	-	-	Specifies the icon hover name
iconName	string	-	-	VerticalDotsIcon	Specifies the icon name
id	string	-	-	-	Accepts id
isDisabled	bool	-	-	false	Tells when the button should present a disabled state
onMouseEnter	func	-	-	-	What the button will trigger when mouse hovered
onMouseLeave	func	-	-	-	What the button will trigger when mouse leave
onMouseOut	func	-	-	-	What the button will trigger when mouse out of button
onMouseOver	func	-	-	-	What the button will trigger when mouse over button
opened	bool	-	-	false	Tells when the button should present a opened state
size	number	-	-	16	Specifies the icon size
style	obj, array	-	-	-	Accepts css style
title	string	-	-	-	Specifies the icon title