diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Text/Examples/TextDefault.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Text/Examples/TextDefault.razor
index 824d81b53f..3b5dcb4bdd 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Text/Examples/TextDefault.razor
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Text/Examples/TextDefault.razor
@@ -1 +1,3 @@
-text
+just text
+
+text in a span
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Text/FluentText.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Text/FluentText.md
index affa6ffb3c..6a38415439 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Text/FluentText.md
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Text/FluentText.md
@@ -10,10 +10,16 @@ The text component codifies Fluent's opinions on typography to make them easy to
Use the text component for plain text. For hypertext, try a [FluentLink](/link) instead.
+>[!Note] The Text component does **not** enclose the `ChildContent` in any additional HTML elements by default.
+You can use the `As` parameter (of type `TextTag`) to produce semantic HTML elements or specify the tag directly
+in the `ChildContent` (e.g., `Some text
`).
+
## Font families
+
Use the `Font` parameter to choose a font family. Use the monospace font to represent code.
## Alignment
+
The `Align` parameter allows you to change text alignment. In most cases, start aligned text is the easiest to read. Use other alignments sparingly.
Avoid justified text in web pages. The consistent line length and inconsistent spacing might make scanning information more difficult.
@@ -21,7 +27,8 @@ Avoid justified text in web pages. The consistent line length and inconsistent s
For more info, see our typography guidelines.
## Accessibility
-By default, text components result in span elements. Use the as prop to produce semantic HTML.
+
+By default, text components just render the `ChildContent`. Use the `As` parameter to produce semantic HTML.
Avoid using the appearance of a font to convey meaning. Bold and italic text should be used only when necessary, as not all screen readers communicate when text is bold or italicized.
diff --git a/src/Core/Components/Text/FluentText.razor b/src/Core/Components/Text/FluentText.razor
index 2db5218a18..04a7383407 100644
--- a/src/Core/Components/Text/FluentText.razor
+++ b/src/Core/Components/Text/FluentText.razor
@@ -5,7 +5,6 @@
- @ChildContent
+ @if (As is { } tag)
+ {
+
+ @ChildContent
+
+ }
+ else
+ {
+ @ChildContent
+ }
diff --git a/src/Core/Components/Text/FluentText.razor.cs b/src/Core/Components/Text/FluentText.razor.cs
index b6f28dce7f..3fabf76ba3 100644
--- a/src/Core/Components/Text/FluentText.razor.cs
+++ b/src/Core/Components/Text/FluentText.razor.cs
@@ -25,10 +25,11 @@ public FluentText(LibraryConfiguration configuration) : base(configuration) { }
.Build();
///
- /// Gets or sets the tag to be rendered.
+ /// Gets or sets the tag to surround the with to create semantic HTML Default to
+ /// so ChildContent is displayed as provided without any additional wrapping element.
///
[Parameter]
- public TextTag As { get; set; }
+ public TextTag? As { get; set; }
///
/// Gets or sets the size of the text.
diff --git a/tests/Core/Components/Checkbox/FluentCheckboxTests.FluentCheckbox_Default.verified.razor.html b/tests/Core/Components/Checkbox/FluentCheckboxTests.FluentCheckbox_Default.verified.razor.html
index 7471b501ba..6476b042e0 100644
--- a/tests/Core/Components/Checkbox/FluentCheckboxTests.FluentCheckbox_Default.verified.razor.html
+++ b/tests/Core/Components/Checkbox/FluentCheckboxTests.FluentCheckbox_Default.verified.razor.html
@@ -3,7 +3,7 @@
-
+