Text

The core text component

Props

NameTypeDescription
weight
enumTEXT_WEIGHT
size
enumTEXT_SIZE
color
enumTEXT_COLOR
hoverColor
enumTEXT_COLOR
align
enum
domElement
union
component
union
multiline
bool
children
node
className
string
onClick
func
interactive
bool
notInteractive
bool
noUnderline
bool
resetTransform
bool
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>