Text

Renders text in a consistent way across Bulb.

States

Paragraph Text

By simply using the Text component as-is, you'll get the standard paragraph.

In-line Text

In-line text is used when you have a simple sentence, or a text requirement that doesn't require paragraph styling.

Sizes and Styles

You can specify the size of the text using the size property and one of the size names, as described on the Typography page.

Bold text can also be specified with the bold modifier.

It is possible to mix and match bold, inline and sizes together, especially within other Text components.

Headers

By adding the heading modifier, the text is rendered as an <h1> heading. For accessibility, the heading must have the correct level for the heading's context in the document structure. This can be employed using the level prop, and is included on the heading element as aria-level="[level]".

A level of 1 or no level prop supplied will both result in <h1>.

Color

You can specify the colour of the text with the color property.

Max width

You can specify the max width of the text with the maxWidth property.

Text alignment

Using the textAlign property, you can specify if you want the aligned to the left, center or right side.

Centered text

If you want the text block to be horizontally centred, you can use the marginCentre property.