MenuButton
View .mdButton with a trailing chevron that opens a menu.
Default
Loading interactive example. Full source is available below.
View example source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import * as React from 'react';
// Inline wrapper — see CompoundButton.stories.tsx.
export const Default = (): JSXElement => (<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton>Example</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>);
export default Default;
API referenceGenerated CoreAI prop and type summaries
API
Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.
MenuButton API
interface MenuButtonProps {
/**
* A button can have its content and borders styled for greater emphasis or to be subtle.
* - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.
* - 'primary': Emphasizes the button as a primary action.
* - 'outline': Removes background styling.
* - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
* - 'transparent': Removes background and border styling.
* @default 'secondary'
*/
appearance?: "outline" | "subtle" | "secondary" | "primary" | "transparent";
as?: "a" | "button";
children?: any;
className?: string;
/**
* A button can show that it cannot be interacted with.
* @default false
*/
disabled?: boolean;
/**
* When set, allows the button to be focusable even when it has been disabled.
* This is used in scenarios where it is important to keep a consistent tab order
* for screen reader and keyboard users. The primary example of this
* pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
* When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
* is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
* pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
* @default false
* false
*/
disabledFocusable?: boolean;
/**
* Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
*/
icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;
/**
* Menu icon that indicates that this button has a menu that can be expanded.
*/
menuIcon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;
ref?: Ref<HTMLAnchorElement | HTMLButtonElement>;
/**
* A button can be rounded, circular, or square.
* @default 'circular'
*/
shape?: "circular" | "rounded" | "square";
/**
* A button supports different sizes.
* @default 'medium'
*/
size?: "small" | "medium" | "large";
style?: CSSProperties;
}
Implementation
CoreAI 0.12.0; Fluent 9.74.9.
Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.
Appearance
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CalendarMonthFilled } from "@fluentui/react-icons";
import * as React from 'react';
const useStyles = makeStyles({
wrapper: {
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
export const Appearance = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton icon={<CalendarMonthRegular />}>Default</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton appearance="primary" icon={<CalendarMonthRegular />}>
Primary
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton appearance="outline" icon={<CalendarMonth />}>
Outline
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton appearance="subtle" icon={<CalendarMonth />}>
Subtle
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton appearance="transparent" icon={<CalendarMonth />}>
Transparent
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default Appearance;
Disabled
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import * as React from 'react';
const useStyles = makeStyles({
wrapper: {
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
export const Disabled = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton>Enabled state</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton disabled>Disabled state</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton disabledFocusable>Disabled focusable state</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default Disabled;
Icon
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { FilterRegular } from "@fluentui/react-icons";
import { Tooltip } from "@coreai-ds/react-components";
import * as React from 'react';
const useStyles = makeStyles({
wrapper: {
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
export const Icon = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton icon={<CalendarMonthRegular />}>With calendar icon</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton icon={<CalendarMonthRegular />} menuIcon={<FilterRegular />}>
With calendar icon and custom filter menu icon
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<Tooltip content="With calendar icon and no contents" relationship="label">
<MenuButton icon={<CalendarMonthRegular />}/>
</Tooltip>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default Icon;
Shape
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import * as React from 'react';
const useStyles = makeStyles({
wrapper: {
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
export const Shape = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton>Rounded</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton shape="circular">Circular</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton shape="square">Square</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default Shape;
Size
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import * as React from 'react';
const useStyles = makeStyles({
wrapper: {
alignItems: 'center',
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
export const Size = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton size="small">Size: small</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton size="medium">Size: medium</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton size="large">Size: large</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default Size;
Size: large
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { Tooltip } from "@coreai-ds/react-components";
import * as React from 'react';
const useStyles = makeStyles({
wrapper: {
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
export const SizeLarge = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton size="large">Large</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton icon={<CalendarMonthRegular />} size="large">
Large with calendar icon
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<Tooltip content="Large with calendar icon only" relationship="label">
<MenuButton icon={<CalendarMonthRegular />} size="large"/>
</Tooltip>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default SizeLarge;
Size: medium
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { Tooltip } from "@coreai-ds/react-components";
import * as React from 'react';
const useStyles = makeStyles({
wrapper: {
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
export const SizeMedium = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton size="medium">Medium</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton icon={<CalendarMonthRegular />} size="medium">
Medium with calendar icon
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<Tooltip content="Medium with calendar icon only" relationship="label">
<MenuButton icon={<CalendarMonthRegular />} size="medium"/>
</Tooltip>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default SizeMedium;
Size: small
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { Tooltip } from "@coreai-ds/react-components";
import * as React from 'react';
const useStyles = makeStyles({
wrapper: {
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
export const SizeSmall = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton size="small">Small</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton icon={<CalendarMonthRegular />} size="small">
Small with calendar icon
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<Tooltip content="Small with calendar icon only" relationship="label">
<MenuButton icon={<CalendarMonthRegular />} size="small"/>
</Tooltip>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default SizeSmall;
With Long Text
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import * as React from 'react';
const useStyles = makeStyles({
longText: {
width: '280px',
},
wrapper: {
alignItems: 'center',
columnGap: '15px',
display: 'flex',
minWidth: 'min-content',
},
});
export const WithLongText = (): JSXElement => {
const styles = useStyles();
return (<div className={styles.wrapper}>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton>Short text</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton className={styles.longText}>
Long text wraps after it hits the max width of the component
</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>);
};
export default WithLongText;