Text

The core text component

Props

NameTypeDescription
weight
TEXT_WEIGHT
size
TEXT_SIZE
color
TEXT_COLOR
hoverColor
TEXT_HOVER_COLOR
align
TEXT_ALIGN
domElement
Function | string
component
Function | string
multiline
boolean
children
React.Node
className
string
onClick
Function
interactive
boolean
notInteractive
boolean
noUnderline
boolean
resetTransform
boolean
dangerouslySetInnerHTML
Object
target
string
href
string
name
string
theme
Object

a text node

A standard text node
Hello World
<Text color="blue" size="large" weight="semi-bold" > Hello World </Text>

as a link

The component can be overwridden to create a link
<Text color="pink500" component="a" href="https://kalohq.com" size="large" weight="semi-bold" > Hello World </Text>

with interactivity

A standard text node
<a href="#"> <Text color="pink500" size="large" weight="semi-bold" > An interactive text node </Text> </a>

varying font weights

light
normal
medium
semi-bold
<div> <Text weight="light"> light </Text> <br /> <Text weight="normal"> normal </Text> <br /> <Text weight="medium"> medium </Text> <br /> <Text weight="semi-bold"> semi-bold </Text> </div>

with onClick

If an onClick event is present, several interactive styles will be set automatically
I have an onClick event
<Text onClick={function noRefCheck() {}}> I have an onClick event </Text>

with spacing

As Text extends the layout components, all of the spacing props are available
with fixed pixel margin
with scaled margin
with scaled left padding
with fixed pixel right padding
<div> <Text margin={20}> with fixed pixel margin </Text> <br /> <Text margin="small"> with scaled margin </Text> <br /> <Text paddingLeft="medium"> with scaled left padding </Text> <br /> <Text paddingRight={90}> with fixed pixel right padding </Text> </div>