import { Meta } from "@storybook/blocks";
import {
  BUTTON,
  ICON_BUTTON,
  SPLIT_BUTTON
} from "../../../storybook/components/related-components/component-description-map";
import * as MenuButtonStories from "./MenuButton.stories";

<Meta of={MenuButtonStories} />

# MenuButton

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

MenuButton is a component that opens a Dialog next to a button, the content of the dialog could be anything you want.

<Canvas of={MenuButtonStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "When you want to place content next to an element",
    "When the content needs to be on top of adjacent content "
  ]}
/>

## Variants

### Sizes

<Canvas of={MenuButtonStories.Sizes} />

### Different Icon

<Canvas of={MenuButtonStories.DifferentIcon} />

### With Text

<Canvas of={MenuButtonStories.WithText} />

### With Text and Icon at the end

<Canvas of={MenuButtonStories.WithTextAndIconAtTheEnd} />

### Disabled

<Canvas of={MenuButtonStories.Disabled} />

### Custom trigger element

You can use any element as a trigger for the menu button, just pass it as a <code>triggerElement</code> to the <code>MenuButton</code> component.

<Canvas of={MenuButtonStories.CustomTriggerElement} />

## Related components

<RelatedComponents componentsNames={[BUTTON, ICON_BUTTON, SPLIT_BUTTON]} />