How to add footer in App Bridge Modal

App Bridge
1

Hi, I am trying to migrate my Polaris Modal to an App Bridge Modal by creating a component that functions the same as the Polaris Modal. It will have all the same properties as the Polaris Modal. However, it seems like there is no footer prop or any documentation showing how to achieve this.

Thank you in advance for your help

image
image626×297 4 KB

2

Hi @toan_misa_avada15,

You can customize the secondary and primary buttons in the footer of the modal using button elements through the ui-title-bar element, like this:

<ui-modal id="my-modal">
  <p>Message</p>
  <ui-title-bar title="TITLE">
    <button variant="primary">PRIM</button>
    <button>SEC</button>
  </ui-title-bar>
</ui-modal>

You can’t customize the footer more than that though, so the recommendation is to use the primary and secondary actions and add the other content directly within the modal body.

2 Likes