Text

The @bento/text package exports the Text component primitive.

Installation

npm install --save @bento/text

Props

The @bento/text package exports the Text component:

The following properties are available to be used on the Text component:

| Prop | Type | Required | Description | |------|------|----------|------------| | align | "start" \| "center" \| "end" \| "justify" | No | The alignment of the text. | | as | string | No | The HTML element to render the text as. | | children | ReactNode | No | The content to display inside the text. | | maxLines | number | No | The maximum number of lines to display. | | wrap | "wrap" \| "nowrap" \| "balance" \| "pretty" \| "stable" | No | The wrapping behavior of the text. | | slot | string | No | A named part of a component that can be customized. This is implemented by the consuming component. The exposed slot names of a component are available in the components documentation. | | slots | Record<string, object \| Function> | No | An object that contains the customizations for the slots. The main way you interact with the slot system as a consumer. |

Examples

As

Setting the as prop allows you to change the HTML tag of the Text component.

Align

Setting the align prop allows you to change the alignment of the text. You can choose from start, center, end, or justify. start works like left and end works like right. These keywords support RTL languages so you do not need to worry about the language of the text.

Max Lines

Setting the maxLines prop allows you to limit the number of lines of text that are displayed using an ellipsis. In browsers that don't support multiline text truncation using line-clamp, the text will be truncated after a single line regardless of the number provided for maxLines.

Wrap

Setting the wrap prop allows you to change the wrapping of the text. The values can be wrap, nowrap, balance, pretty, or stable.

• wrap is the setting that is most commonly used. For most elements you will not to explicitly set this.
• nowrap should be avoided except in cases where it is important to prevent the text from wrapping.
• balance is most commonly used for headlines, titles, and labels.
• pretty is most commonly used for body text.
• stable is commonly used for editable text, such as textareas.