Renders text in a consistent way across Bulb.
By simply using the Text component as-is, you'll get the standard paragraph.
In-line text is used when you have a simple sentence, or a text requirement that doesn't require paragraph styling.
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
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
1 or no
level prop supplied will both result in
You can specify the colour of the text with the color property.
You can specify the max width of the text with the maxWidth property.
Using the textAlign property, you can specify if you want the aligned to the left, center or right side.
If you want the text block to be horizontally centred, you can use the marginCentre property.