Text

Renders text blocks in styles to fit the purpose.

Text

To implement Text component into your project you’ll need to add the import:

import Text from "@kiwicom/orbit-components/lib/Text";

After adding import into your project you can use it simply like:

<Text>Hello World!</Text>

Props

Table below contains all types of the props available in the Text component.

NameTypeDefaultDescription
asenum"p"The element used for the root node.
alignenum"left"The align of the Text.
childrenReact.NodeThe content of the Text.
dataTeststringOptional prop for testing purposes.
idstringThe id HTML attribute.
italicbooleanfalseIf true, the Text will be in italic style.
sizeenum"normal"The size of the Text.
spaceAfterenumAdditional margin-bottom after component. See this docs
typeenum"primary"The color type of the Text.
uppercasebooleanfalseIf true, the Text will be in uppercase style.
strikeThroughbooleanfalseIf true, the Text will have text-transform: line-through.
weightenum"regular"The weight of the Text.
withBackgroundbooleanIf specified, Text will have background

enum

typealignassizeweight
"primary""left""p""small""normal"
"secondary""center""span""normal""medium"
"info""right""div""large""bold"
"success""justify"
"warning"
"critical"
"white"