React Text components for Fluent UI React
The Text component exists to ensure consistency in your application's content by setting fixed sizes and other styles. This package also exports wrappers which ensure your text follows the Fluent design standards of typography.
To use the Text components in your application, you can start by installing the main package of Fluent UI components:
npm install @fluentui/react-components
import { FluentProvider, Text } from '@fluentui/react-components';
const App = () => (
<FluentProvider>
<Text>Fluent UI Text!</Text>
</FluentProvider>
);
Or by installing only the @fluentui/react-text
package. Keep in mind you'll need to install the FluentProvider package as well:
npm install @fluentui/react-text
npm install @fluentui/react-provider
import { FluentProvider } from '@fluentui/react-provider';
import { Text } from '@fluentui/react-text';
const App = () => (
<FluentProvider>
<Text>Fluent UI Text!</Text>
</FluentProvider>
);
Wrappers offer an easy way to use text according to the Fluent Design System while also providing semantic code readability.
Below is an example of the Display wrapper vs using the Text component:
import { Text, Display } from '@fluentui/react-text';
const Example = () => (
<>
<Text size={1000} weight="semibold">
This text is styled like a Display variant.
</Text>
<Display>This text is also styled like a Display variant.</Display>
</>
);
As you can see, using the Display
wrapper is a lot easier to read and provides a clearer visual of the page's layout.
By default, Text and all the typography wrappers render a <span>
element. You should use the as
property to ensure your page has proper semantic elements such as heading or paragraph elements.
<div>
<Subtitle1 as="h1">Subtitle1</Subtitle1>
<Subtitle2 as="h2">Subtitle2</Subtitle2>
<Text as="p">This is simple example</Text>
</div>
This will result in the following DOM structure:
<div>
<h1>Subtitle1</h1>
<h2>Subtitle2</h2>
<p>This is simple example</p>
</div>
For more information about the components, please refer to the API documentation.
For migration information, have a look at the migration guide.