Renders text in a consistent way across Bulb.


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.


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>.


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.

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.