Skip to main content

Text

The Text component is the used to render the app typography, such as headings and paragraphs, within an interface. By default, it renders a React Native Text element.

Import#

import { Text } from "pearl-ui";

Usage#

// default variant is set as "p3" in the default Pearl theme<Text>Heya! I am displaying some text</Text>

Text variants#

Use the variant prop to change the typography style of the Text component. You can set the value to the keys available in PearlTheme.components.Text["variants"], which are "h1", "h2", etc. in the default theme.

// variant="h1" refers to the value of `theme.components.Text["variants"]["h1"]`<Text variant="h1">This is a heading</Text>

Override Style#

The Text component also supports a variety of style props which can be used to override the pre-defined variant style in the theme. Manual style props passed into the component have a higher precedance than the default component config.

// variant="p1" refers to the value of `theme.components.Text["variants"]["p1"]`// passing style prop color="primary.300" overrides the default component config value of color="neutral.50"<Text variant="btn1" color="primary.300">  This is a large button text</Text>

Example#

Accessibility#

  • Text has the role of text.
  • Text has the label set as the text body.

Props#

Supported style props#

The Text component supports the following style props:

Additional props#

NameRequiredTypeDefaultDescription
sizefalsePearlTheme.components.Text["sizes"]Size variant to use as defined in the active theme.
variantfalsePearlTheme.components.Text["variants"]"p1"Typography variant to use as defined in the active theme.
scaleFontSizefalsebooleantrueWhether to slightly scale the font size based on the screen dimensions.

Default Component Config#

export default {  baseStyle: {    color: {      light: "neutral.900",      dark: "neutral.50",    },    scaleFontSize: true,    letterSpacing: "m",  },  variants: {    h1: {      fontFamily: "heading",      fontWeight: "bold",      fontSize: "8xl",      lineHeight: "12xl",    },    h2: {      fontFamily: "heading",      fontWeight: "bold",      fontSize: "5xl",      lineHeight: "8xl",    },    t1: {      fontFamily: "heading",      fontWeight: "semibold",      fontSize: "2xl",      lineHeight: "7xl",    },    t2: {      fontFamily: "heading",      fontWeight: "semibold",      fontSize: "l",      lineHeight: "3xl",    },    st1: {      fontFamily: "heading",      fontWeight: "semibold",      fontSize: "m",      lineHeight: "2xl",    },    st2: {      fontFamily: "heading",      fontWeight: "semibold",      fontSize: "s",      lineHeight: "l",    },    p1: {      fontFamily: "body",      fontWeight: "normal",      fontSize: "m",      lineHeight: "xl",    },    p2: {      fontFamily: "body",      fontWeight: "normal",      fontSize: "s",      lineHeight: "l",    },    btn1: {      fontFamily: "body",      fontWeight: "medium",      fontSize: "m",      lineHeight: "2xl",    },    btn2: {      fontFamily: "body",      fontWeight: "medium",      fontSize: "s",      lineHeight: "l",    },    btn3: {      fontFamily: "body",      fontWeight: "medium",      fontSize: "xs",      lineHeight: "m",    },    btn4: {      fontFamily: "body",      fontWeight: "medium",      fontSize: "2xs",      lineHeight: "xs",    },    caption: {      fontFamily: "body",      fontWeight: "normal",      fontSize: "xs",      lineHeight: "m",    },  },  defaults: {    variant: "p1",  },};