@bento/text

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:

<Source language='tsx' code={ DefaultExample } />

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.

<Source language='tsx' code={ AsExample } />

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.

<Source language='tsx' code={ AlignExample } />

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.

<Source language='tsx' code={ MaxLinesExample } />

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.

<Source language='tsx' code={ WrapExample } />