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.