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.
#
Importimport { 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 variantsUse the variant
prop to change the typography style of the Text component. You can set the value to the keys available in
// variant="h1" refers to the value of `theme.components.Text["variants"]["h1"]`<Text variant="h1">This is a heading</Text>
#
Override StyleThe 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
oftext
. - Text has the label set as the text body.
#
Props#
Supported style propsThe Text component supports the following style props:
#
Additional propsName | Required | Type | Default | Description |
---|---|---|---|---|
size | false | Size variant to use as defined in the active theme. | ||
variant | false | "p1" | Typography variant to use as defined in the active theme. | |
scaleFontSize | false | true | Whether to slightly scale the font size based on the screen dimensions. |
#
Default Component Configexport 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", },};