Type: React component

How to get Text?


import { Text } from 'fds/components';

Text is used to display textual content which wraps over multiple lines.

When the content of Text matches the width of its container, it will break the text on a word and start the sentence on the next line. If it is desired to display your textual content on a single line and truncate it, consider using Label instead.


  1. align


    Type: String

    The horizontal alignment of the (textual) content. The possible values are:

    • 'left'

    • 'center'

    • 'right'

    Default value

  2. children


    Type: ReactNode

  3. colorName


    Type: String

    The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.

    When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.

    The possible values can be found in the example.

    Related links

    Default value

  4. fontStackName


    Type: String

    The name of the font stack to render the textual content of the component in. This will set the "font-family" CSS property based on a predefined set of values. Each font stack represents a certain use case in which it should be implemented, which is described below.

    Can be one of:

    • content: a serif font, should be used for articles and longer (regular) content.

    • interface: a sans-serif font, should be used for labels in components and other interface elements.

    • monospace: a fixed-width font, should be used for code (examples).

    Default value

  5. size


    Type: String

    The size of font to render. The possible values are:

    • 's'

    • 'm'

    • 'inherit'

    Defaults to 'm'.

    Default value

  6. userSelect


    Type: String

    The CSS value for user-select. The possible values are:

    • 'none',

    • 'text'

    Defaults to 'text'.

    Default value