## Feature Examples ### Trigger element - description:

Popover menus are opened by interacting with a trigger element. Common trigger elements are:

    • - example: ```jsx }> More Actions } > }> More Actions } > } > ; ``` ### Trigger interaction - description:

    Popover menus are displayed when a trigger element is either clicked or hovered on.

    - example: ```jsx }>Click Here } > ( } > Hover Here )} > ; ``` ### Size - description:

    The size of menu items can be controlled using the textSize prop.

    There are two sizes to choose from:

  • medium is the default used in common cases.
  • small should be used in dense layouts.
    • - example: ```jsx }> View Medium Size } > } size="small"> View Small Size } > ; ``` ### Skin - description:

    The appearance of each menu item can be controlled using the skin prop.

    There are two skins to choose from:

  • dark should be used for all common cases.
  • destructive should be used to highlight destructive and permanent actions, e.g., deleting a contact.

    • Note: Destructive actions should be placed last in the menu.

    - example: ```jsx }>View Skins } > ; ``` ### Disabled - description:

    Actions that are unavailable to users at that time should be marked with the disabled prop.

    - example: ```jsx }> View Disabled State } > ; ``` ### Prefix - description:

    Icons can be added to menu items using the prefixIcon prop. It can help users identify actions quicker.

    Note: small size popovers should use the small icon size, 18x18.

    - example: ```jsx }>View Prefix } > } /> } /> } /> } size="small"> View Small Prefix } > } /> } /> } /> ; ``` ### Subtitle - description:

    Add additional information that helps explain the purpose of a specific action using the subtitle prop.

    - example: ```jsx }>View Subtitle } > ; ``` ### Divider - description:

    Menu items can be organized into groups by adding a between them.

    - example: ```jsx }>View Divider } > ; ``` ### Placement - description:

    The placement of the menu in relation to the trigger element can be controlled using the placement prop.

    There are four placement types to choose from:

  • top, top-start, top-end
  • right, right-start, right-end
  • bottom (default), bottom-start, bottom-end
  • left, left-start, left-end
    • - example: ```jsx }> Top Placement } > }> Left Placement } > }> Right Placement } > }> Bottom Placement } > ; ``` ### Pointer arrow - description:

    By default, a pointer arrow is visible on the top edge of the menu, pointing to the trigger element. To remove the pointer, use the showArrow prop.

    - example: ```jsx }> View With Arrow } > }> View Without Arrow } > ; ``` ### Text overflow - description:

    Define what happens with menu item text when it exceeds the popover maxWidth.

    By default, text wraps into multiple lines. To limit menu item text to a single line, use the ellipsis prop. The full title is revealed in a tooltip on mouse hover.

    - example: ```jsx }> View Wrapping Text } > }> View Text With Ellipsis } > ; ``` ### Custom dimensions - description:

    Popover dimensions can be adjusted using the following props:

  • minWidth - sets the minimum pixel width (default: 144 px).
  • maxWidth - sets the maximum pixel width (default: 204 px).
  • maxHeight - sets the maximum pixel height. When the list of actions exceeds it, a scrollbar is visible.
    • - example: ```jsx }> View Min Width } > }> View Max Width } > }> View Max Height } > ; ``` ## Developer Examples ### Fluid - description:

    The trigger element can be resized to a specific container width using the fluid prop. Use it with ellipsis inside the trigger element to display the full label in a tooltip on hover.

    - example: ```jsx } ellipsis> A very long trigger element title } > ; ``` ## Common Use Case Examples ### Secondary actions in widgets - description:

    The small size popover menu should be used in dense layouts and widgets. Irreversible actions should be highlighted with a destructive skin.

    - example: ```jsx } > } text="Edit info" /> } text="Edit availability" /> } text="Manage permissions" /> } skin="destructive" text="Delete" /> Mike Peterson Sales associate ; ``` ### Secondary page actions - description:

    Popover menus can be used to display a list of secondary page actions.

    Use to organize actions into groups.

    To make sure action titles will not wrap to multiple lines, set the minWidth value to max-content.

    - example: ```jsx }> More Actions } > } text="Update booking settings" /> } text="Accept payments" /> } text="Manage staff" /> } text="Create coupon" /> } text="Get booked on Google" /> } /> ; ``` ### Disabled action explanation - description:

    A subtitle should be used to explain disabled actions in a popover menu.

    - example: ```jsx }> More Actions } > } text="Import contacts" /> } text="Export contacts" subtitle="Only site owners can export contacts" disabled /> } text="Manage custom fields" /> } text="Manage labels" /> } text="Privacy and GDPR" /> } text="Watch demo video" /> } text="Discover CRM tools" /> } text="Send feedback" /> } /> ; ```