ba-text
Sets the type style for headings and body copy in React Native
Airframe
Web Components
React
React Native
Props
| Prop | Description | Type | Default |
|---|---|---|---|
variant |
Typography style from the type stack. Header variants expose the text as a header to assistive technology. Defaults to "body16". |
"header56" | "header44" | "header36" | "header28" | "header24" | "header20" | "header16" | "header12" | "body16" | "body12" |
body16 |
children (required) |
Text content. | ReactNode |
|
align |
Horizontal alignment: "left", "center", or "right". When omitted,no text alignment is applied. |
BaTextAlign |
|
testID |
Used to locate this view in end-to-end tests. | string |
|
accessibilityLabel |
Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space. |
string |
|
accessibilityHint |
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label. | string |
|
accessibilityState |
Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. | AccessibilityState |
|
numberOfLines |
Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. This prop is commonly used with ellipsizeMode. |
number |
|
ellipsizeMode |
This can be one of the following values: - head - The line is displayed so that the end fits in the container and the missing textat the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" - middle - The line is displayed so that the beginning and end fit in the container and themissing text in the middle is indicated by an ellipsis glyph. "ab...yz" - tail - The line is displayed so that the beginning fits in the container and themissing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." - clip - Lines are not drawn past the edge of the text container.The default is tail.numberOfLines must be set in conjunction with this prop.> clip is working only for iOS |
"head" | "middle" | "tail" | "clip" |
Parent components
Put BaText in <BaContent>. BaContent stacks the text and sets the gap. BaText can also be placed in:
<BaCard><BaCardSegmented><BaDetails><BaFlex><BaMessage>(theheadingprop must be a BaText element)<BaPageSegment>
Usage
BaText is the typography component. Web uses headings and paragraphs inside ba-content. React Native uses BaText. BaContent only controls the gap between children.
variant defaults to body16. Header variants set the accessibility role to header. Body variants do not set a role.
Header variants: header56, header44, header36, header28, header24, header20, header16, header12.
Body variants: body16, body12.
Basic usage
<BaContent>
<BaText variant="header28">Page heading</BaText>
<BaText variant="body16">Supporting copy for the heading.</BaText>
</BaContent>Alignment
align accepts left, center, or right.
<BaText variant="body16" align="center">
Centred supporting copy.
</BaText>Truncation
Set numberOfLines to limit the text. ellipsizeMode is tail unless you set head, middle, or clip. clip only applies on iOS.
<BaText variant="header20" numberOfLines={1}>
A long heading that should truncate
</BaText>