fluent-uioffice-fabricfluentui-react

How to center button in TeachingBubble FluentUI component?

I'm using Fluent UI's TeachingBubble component. I want it to have one button, which should be centered. How can that be done? I'm unable to move it from the bottom right corner.

Current code:

      <TeachingBubble
        headline="Welcome"
        primaryButtonProps={{
          children: "Next",
          onClick: () => alert("Primary button pressed!"),
        }}
      >
        This is some content.
      </TeachingBubble>

This outputs:

enter image description here

What should be added to this code so that the primary button is centered (at the red cross I marked)?

Solution

  • Button is inside footer part of TeachingBubble, so the style of footer should be changed:

    <TeachingBubble
        headline="Welcome"
        primaryButtonProps={{
          children: "Next",
          onClick: () => alert("Primary button pressed!"),
        }}
        styles={{
          footer: {
            display: "flex",
            justifyContent: "center",
          },
        }}
      >
        Some text
      </TeachingBubble>

    That renders as:

    enter image description here