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 style.

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

Example

Light

Embed not loading? Click here

Dark

Embed not loading? Click here

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:

• color and backgroundColor
• typography
• layout
• opacity and visiblity
• margin and padding
• textShadow

Additional props

Name	Required	Type	Default	Description
size	false	PearlTheme.components.Text["sizes"]		Size variant to use as defined in the active theme
variant	false	PearlTheme.components.Text["variants"]	"p1"	Typography variant to use as defined in the active theme

Default Component Style

export default {  baseStyle: {    color: {      light: "neutral.900",      dark: "neutral.50",    },  },  variants: {    h1: {      fontFamily: "Poppins-Bold",      fontWeight: "700",      fontSize: 34,      lineHeight: 42,    },    h2: {      fontFamily: "Poppins-Bold",      fontWeight: "700",      fontSize: 28,      lineHeight: 36,    },    t1: {      fontFamily: "Poppins-SemiBold",      fontWeight: "600",      fontSize: 22,      lineHeight: 30,    },    t2: {      fontFamily: "Poppins-SemiBold",      fontWeight: "600",      fontSize: 18,      lineHeight: 26,    },    st1: {      fontFamily: "Poppins-SemiBold",      fontWeight: "600",      fontSize: 16,      lineHeight: 24,    },    st2: {      fontFamily: "Poppins-SemiBold",      fontWeight: "600",      fontSize: 14,      lineHeight: 22,    },    p1: {      fontFamily: "Poppins-Regular",      fontWeight: "400",      fontSize: 16,      lineHeight: 24,    },    p2: {      fontFamily: "Poppins-Regular",      fontWeight: "400",      fontSize: 14,      lineHeight: 22,    },    caption: {      fontFamily: "Poppins-Regular",      fontWeight: "400",      fontSize: 12,      lineHeight: 20,    },    btn1: {      fontFamily: "Poppins-Medium",      fontWeight: "500",      fontSize: 16,      lineHeight: 21,      color: "neutral.50",    },    btn2: {      fontFamily: "Poppins-Medium",      fontWeight: "500",      fontSize: 14,      lineHeight: 19,      color: "neutral.50",    },    btn3: {      fontFamily: "Poppins-Medium",      fontWeight: "500",      fontSize: 12,      lineHeight: 16,      color: "neutral.50",    },    btn4: {      fontFamily: "Poppins-Medium",      fontWeight: "500",      fontSize: 10,      lineHeight: 14,      color: "neutral.50",    },  },  defaults: {    variant: "p1",  },};