Default Theme

Text

Overview

Text is a component for displaying text. You can use Text to standardize text across your web app.

You can specify the variant prop to apply font styles to Text. This variant pulls from the Fluent UI React theme loaded on the page. If you do not specify the variant prop, by default, Text applies the styling from specifying the variant value to medium.

The Text control is inline wrap by default. You can specify block to enable block and nowrap to enable nowrap. For ellipsis on overflow to work properly, block and nowrap should be manually set to true.

Usage

Texts

Text Ramp Example

The quick brown fox jumped over the lazy dog.

Wrap (Default) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

No Wrap Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom Text Style With 'CustomVariant' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom Text Style With 'Style' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<Stack Tokens="new StackTokens { ChildrenGap = new double[] { 10.0 }}">
    <Stack Tokens="new StackTokens { ChildrenGap = new double[] { 5.0 }}">
        <Text Variant=TextType.Large Block="true">
            Text Ramp Example
        </Text>
        @foreach (TextType variant in Enum.GetValues(typeof(TextType)))
        {
            if (variant == TextType.None)
continue;
            <div>
<Text Variant=variant>
    The quick brown fox jumped over the lazy dog.
</Text>
            </div>
        }
    </Stack>
    <Stack Tokens="new StackTokens { ChildrenGap = new double[] { 5.0 }}">
        <Text Variant=TextType.Large Block="true">
            Wrap (Default)
        </Text>
        <Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
            in culpa qui officia deserunt mollit anim id est laborum.
        </Text>
    </Stack>
    <Stack Tokens="new StackTokens { ChildrenGap = new double[] { 5.0 }}">
        <Text Variant=TextType.Large Block=true>
            No Wrap
        </Text>
        <Text NoWrap="true">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
            in culpa qui officia deserunt mollit anim id est laborum.
        </Text>
    </Stack>
    <Stack Tokens="new StackTokens { ChildrenGap = new double[] { 5.0 }}">
        <Text Variant=TextType.Large Block=true>
            Custom Text Style With 'CustomVariant'
        </Text>
        <Text CustomVariant="customStyle">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
            in culpa qui officia deserunt mollit anim id est laborum.
        </Text>
    </Stack>
    <Stack Tokens="new StackTokens { ChildrenGap = new double[] { 5.0 }}">
        <Text Variant=TextType.Large Block=true>
            Custom Text Style With 'Style'
        </Text>
        <Text Style="color:red;font-size:12px">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
            in culpa qui officia deserunt mollit anim id est laborum.
        </Text>
    </Stack>
</Stack>