title: Close button not having "X" in Fluent UI
body: <p>I'm trying to create a <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/teachingbubble" rel="nofollow noreferrer">TeachingBubble</a> using Fluent UI. I want it to have close button, marked with &quot;x&quot;.
  I'd like to have a closing button like in this example:</p>
  <p><a href="https://i.stack.imgur.com/my35K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/my35K.png" alt="enter image description here" /></a></p>
  <p>How can that be done in react, using Fluent UI?</p>
  <p>My current code:</p>
  <pre><code>import { TeachingBubble } from &quot;@fluentui/react&quot;;
  
  interface IOnboardingProps {
    actionFunction?: () =&gt; void;
    closeFunction?: () =&gt; void;
  }
  
  const Onboarding2: React.FC&lt;IOnboardingProps&gt; = ({
    actionFunction = () =&gt; {},
    closeFunction = () =&gt; {},
  }) =&gt; {
    return (
      &lt;TeachingBubble
        headline=&quot;How to get started&quot;
        hasCloseButton={true}
        closeButtonAriaLabel=&quot;Blabla&quot;
        onDismiss={() =&gt; {
          console.log(&quot;Close button pressed.&quot;);
          closeFunction();
          console.log(&quot;Passed function done.&quot;);
        }}
        primaryButtonProps={{ children: &quot;Done&quot;, onClick: () =&gt; actionFunction() }}
      &gt;
        Some instructions
      &lt;/TeachingBubble&gt;
    );
  };
  
  export default Onboarding2;
  </code></pre>
  <p>And this is what I get:</p>
  <p>The close button exists but it doesn't have an &quot;X&quot;. I thought &quot;X&quot; was added by default when &quot;hasCloseButton&quot; is set to true.</p>
  <p><a href="https://i.stack.imgur.com/tBbum.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tBbum.jpg" alt="enter image description here" /></a></p>