2
import * as React from 'react';
import { IContextualMenuProps, IIconProps, Stack, IStackStyles } from '@fluentui/react';
import { CommandBarButton } from '@fluentui/react/lib/Button';

export interface IButtonExampleProps {
  // These are set based on the toggles shown above the examples (not needed in real code)
  disabled?: boolean;
  checked?: boolean;
}

const menuProps: IContextualMenuProps = {
  items: [
    {
      key: 'emailMessage',
      text: 'Email message',
      iconProps: { iconName: 'Mail' },
    },
    {
      key: 'calendarEvent',
      text: 'Calendar event',
      iconProps: { iconName: 'Calendar' },
    },
  ],
};
const addIcon: IIconProps = { iconName: 'Add' };
const mailIcon: IIconProps = { iconName: 'Mail' };
const stackStyles: Partial<IStackStyles> = { root: { height: 44 } };

export const ButtonCommandBarExample: React.FunctionComponent<IButtonExampleProps> = props => {
  const { disabled, checked } = props;

  // Here we use a Stack to simulate a command bar.
  // The real CommandBar control also uses CommandBarButtons internally.
  return (
    <Stack horizontal styles={stackStyles}>
      <CommandBarButton
        iconProps={addIcon}
        text="New item"
        // Set split=true to render a SplitButton instead of a regular button with a menu
        // split={true}
        menuProps={menuProps}
        disabled={disabled}
        checked={checked}
      />
      <CommandBarButton iconProps={mailIcon} text="Send mail" disabled={disabled} checked={checked} />
    </Stack>
  )
};

enter image description here

How to disable this icon in fluent-ui button component

which props or method i need to add to disable it. can anyone help regarding it as i am not able to get into fluent ui react https://developer.microsoft.com/en-us/fluentui#/controls/web/button

user1672994
  • 10,509
  • 1
  • 19
  • 32

1 Answers1

1

You can specific the menuIconProps (read here) which will not display the icon if specified as empty string.

Add this property menuIconProps={{iconName: ""}}

<CommandBarButton
        iconProps={addIcon}
        text="New item"
        // Set split=true to render a SplitButton instead of a regular button with a menu
        // split={true}
        menuIconProps={{iconName: ""}}
        menuProps={menuProps}
        disabled={disabled}
        checked={checked}
      />

With above change, the button will be displayed as shown below:

enter image description here

user1672994
  • 10,509
  • 1
  • 19
  • 32