How to Dynamically Hide and Show Ribbon Buttons Using the Ribbon API?

Hi @aborowicz

Currently, the supported runtime customization options depend on what you are trying to change.

For individual custom ribbon buttons, the supported approach is to enable or disable them dynamically by using Office.ribbon.requestUpdate(). Microsoft’s Ribbon API documentation describes requestUpdate() as the method used to update the ribbon, and the Ribbon API 1.1 requirement set specifically supports enabling and disabling custom add-in commands.

However, hiding or showing individual ribbon buttons dynamically is not generally supported for standard add-in commands defined in the manifest. The documented dynamic visibility scenario is for contextual tabs. With RibbonApi 1.2, you can create/register a custom contextual tab using Office.ribbon.requestCreateControls() and then show or hide that tab by calling Office.ribbon.requestUpdate() with the tab’s visible property. Microsoft’s API example shows setting a contextual tab such as CtxTab1 to visible:`` ``true.

Recommended workarounds and best practices:

1. Preferred: Stick with Enable/Disable

Grayed-out (disabled) buttons are the standard Office UX pattern for “not available right now.” Most users understand this better than buttons that appear/disappear.

You already have this working — just keep using it.

Office.ribbon.requestUpdate({
  tabs: [{
    id: "YourTabId",
    groups: [{
      id: "YourGroupId",
      controls: [{
        id: "YourButtonId",
        enabled: false   // or true
      }]
    }]
  }]
});

2. Best true “hide/show” approach: Use Custom Contextual Tabs

If you really need the buttons to disappear completely, move the buttons that should appear/disappear together into one or more custom contextual tabs. Then show/hide the entire tab.

Steps:

1. Create the contextual tab at runtime with Office.ribbon.requestCreateControls (can only be called once per session).
2. Control visibility later with requestUpdate.

Example (show the tab):

await Office.ribbon.requestUpdate({
  tabs: [{
    id: "CtxTab1",
    visible: true
  }]
});

You can also combine tab visibility + button enabled state in the same call:

await Office.ribbon.requestUpdate({
  tabs: [{
    id: "CtxTab1",
    visible: true,
    groups: [{
      id: "CustomGroup111",
      controls: [{
        id: "MyButton",
        enabled: true
      }]
    }]
  }]
});

Requirements:

• Shared runtime must be enabled.
• Supported in Excel (Windows/Mac/Web), Word, PowerPoint (with version requirements).
• Define the tab structure following the dynamic-ribbon schema.

Official guide: Create custom contextual tabs in Office Add-ins

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.