tridion-sites-extensions-api-docs

Home > @tridion-sites/extensions > TextProps

TextProps interface

Signature:

export interface TextProps extends ColorProps, TooltipProps

Extends: ColorProps, TooltipProps

Properties

Property Modifiers Type Description
alignment?   TextAlignment (Optional) The alignment of the text in the container.
breakWord?   boolean (Optional) Determines whether the text should break words if they exceed the container width. Note that it can be used in combination with multiLine: true only, since single line text is truncated by default.
children?   ReactNode (Optional) The content to be rendered inside the Text component.
compact?   boolean (Optional) Determines whether the Text component should have compact spacing. If set to true, the line height of the text will be reduced.
direction?   TextDirection (Optional) The direction of the text.
multiLine?   boolean (Optional) Allow text to flow over multiple lines. By default it’s a single line text with truncation enabled.
notSelectable?   boolean (Optional) Option to make text non-selectable by the user.
tag?   TextTag (Optional) The HTML tag to be used for rendering the Text component. Overrides default tag defined by type.
type?   TextType <p>(Optional) Preset that consist of specific styling (size, weight, etc) and HTML tag.</p><p>- heading1 - usually represents a top-level heading or title. It is styled as a large and prominent text. By default <h1> HTML tag is used. - heading2 - a secondary-level heading. It is styled as a slightly smaller text compared to heading1. By default <h2> HTML tag is used. - heading3 - a tertiary-level heading. It is styled as a smaller text compared to heading2. By default <h3> HTML tag is used. - default - default style for regular text. It is styled as a standard paragraph text. By default <div> HTML tag used. - defaultBold - the default style for bold text. It is styled similarly to default but with added font-weight. By default <div> HTML tag is used. - small - a smaller size for text. It is typically used for captions, footnotes, or other smaller pieces of text. By default <div> HTML tag is used. - smallBold - a smaller size for bold text. It combines the smaller size of ‘small’ with the added font-weight. By default <div> HTML tag is used.</p>
underline?   boolean (Optional) Determines whether the text should have an underline.
uppercase?   boolean (Optional) Determines whether the text should be displayed in uppercase.