Skip to main content

setCustomComponent(slug, getComponent)

Sets a CommandBar component to custom HTML or to a custom component (.addComponent). This is only available to select enterprise customers — please reach out to if you'd like to use this feature.


// set a custom footer
window.CommandBar.setCustomComponent("footer", customFooter);

// set a custom default state
() => `
<div style="padding: 3rem; text-align: center"><p>Try searching for something!</p>
<img width="100%" src="" />

Method parameters

slug Required

'header' | 'input' | 'sidepanel' | 'footer' | 'navPaneHeader' | 'navPaneFooter' | 'defaultState' | 'emptyState'

The component that you want to customize.

  • header: appears above the search input
  • input: appears within the search input
  • sidepanel: appears to the right of the search input
  • footer: appears below Spotlight
  • navPaneHeader: appears above the navigation pane
  • navPaneFooter: appears below the navigation pane
  • defaultState: takes over the default bar state when there the input is blank
  • emptyState: takes over the no results view in Spotlight

getComponent Required

(() => CustomComponent | () => HTMLString)

A function that returns either an HTML string or customComponent.