How to center button in TeachingBubble FluentUI component?

Question

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:

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

score 1 · Accepted Answer · answered Feb 10 '21 at 09:01

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:

This should be marked as the best answer. I verified the code example centers the button. — Tom Resing, Oct 03 '22 at 15:42

How to center button in TeachingBubble FluentUI component?

1 Answers1