In modern SharePoint, there is no supported SPFx API to hide the built-in command bar buttons (such as New, Edit, Share, Pin to Quick Access) directly through code. That is why attempts like:

const newCommand: Command = this.tryGetCommand("newComposite");
newCommand.visible = false;

return undefined. The tryGetCommand() method only works for commands defined within your own ListView Command Set, not the built-in buttons.

Recommended Approaches

1. Custom ListView Command Set Extension

   • Define a Command Set extension that includes only the buttons you want users to see.

   • The built-in buttons remain in the DOM but are effectively hidden because your extension does not render them.

   • This is the safest, long-term solution and fully supported by SPFx.

2. JSON Formatting (View Formatting)

   • You can hide certain buttons by applying JSON formatting to the list view.

   • This requires changes in the UI or via the SharePoint REST API.

   • Fully supported but not purely code-based.

3. CSS / DOM Override (Not recommended for production)

   • Injecting CSS like display: none can hide buttons.

   • This is fragile and may break if Microsoft updates the DOM structure.

Key Points

• There is no official SPFx API to directly hide built-in command bar buttons.

• Any solution that manipulates the DOM directly is inherently fragile.

• For a maintainable, supported solution, a custom Command Set extension is the recommended approach.

import { BaseListViewCommandSet, Command } from '@microsoft/sp-listview-extensibility';

export interface ICustomCommandSetProperties {
  // Define any properties if needed
}

export default class CustomCommandSet extends BaseListViewCommandSet<ICustomCommandSetProperties> {

  public onInit(): Promise<void> {
    // Initialization logic if needed
    return Promise.resolve();
  }

  public onExecute(event: { itemId: string, commandId: string }): void {
    switch (event.commandId) {
      case 'COMMAND_1':
        // Handle your custom command
        break;
      case 'COMMAND_2':
        // Handle another command
        break;
      default:
        break;
    }
  }

  public onListViewUpdated(event): void {
    // Hide built-in buttons by only showing your custom commands
    const newCommand: Command = this.tryGetCommand('COMMAND_1');
    const editCommand: Command = this.tryGetCommand('COMMAND_2');

    // Show only your custom commands
    if (newCommand) newCommand.visible = true;
    if (editCommand) editCommand.visible = true;

    // All built-in commands are not included here, so effectively hidden
  }
}