Text

Text allows you to control the font family, size colour, weight, line-height and alignment.

Sample text

import { Text } from "@nulogy/components";

<Text>Sample text</Text>

Variations

Alignment

Left-aligned text

Center-aligned text

Right-aligned text

<Text textAlign="left">Left-aligned text</Text>
<Text textAlign="center">Center-aligned text</Text>
<Text textAlign="right">Right-aligned text</Text>

Colour

Color can be set to Nulogy using a reference to the theme.colors object.

Blue text

<Text color="blue">Blue text</Text>

Disabled

Disabled text

<Text disabled>Disabled text</Text>

Inline

Inline text Doesn't cause a line break
<Text inline>Inline text </Text>
<Text inline>Doesn't cause a line break</Text>

Monospace

Monospace text

<Text fontFamily="mono">Monospace text</Text>

Size

Font size can be set using a reference to the theme.fontSizes object.

Smaller text

Small text

Medium text (default)

Large text

Larger text

Largest text

<Text fontSize="smaller">Smaller text</Text>
<Text fontSize="small">Small text</Text>
<Text fontSize="medium">Medium text (default)</Text>
<Text fontSize="large">Large</Text>
<Text fontSize="larger">Larger</Text>
<Text fontSize="largest">Largest</Text>

Weight

Font weight can be set using a reference to the theme.fontWeights object.

Light

Normal (default)

Medium bold

Bold

<Text fontWeight="light">Light</Text>
<Text fontWeight="normal">Normal (default)</Text>
<Text fontWeight="medium">Medium bold</Text>
<Text fontWeight="bold">Bold</Text>

Responsive

All Text props can be used responsively by using an object that defines small, medium and/or large, based on the theme.breakpoints object

This example displays columns on small screens and rows on large ones.

Green text on large screens, blue on medium and red on small.

<Text color={{ extraSmall: "red", small: "blue", medium: "green"}}>
  Green text on large screens, blue on medium and red on small.
</Text>

Props

NameTypeDefaultDescription

disabled

Boolean

false

Lightens text to imply that it's disabled.

inline

Boolean

false

Displays text inline instead of as a block.

className

String

undefined

className passed to the text component.

Text components have access to typography, colour, and space style props. See the style prop documentation for a full list of available props.

Related components