Components

Component

Text

Semantic typography primitive.

ReactReact Native6 props
PreviewReact

Typography tokens

Text keeps semantic elements, truncation, line-height, and color tokens consistent across React and React Native.

textStyle="mono"

Imports

import { Text } from "@hozorica/hods-react";
import { Text } from "@hozorica/hods-react-native";

Props

PropTypeDescription
textStyleTextStyleTokenPreferred complete typography style.
fontSizeTextSizeToken | numberOverrides style font size.
fontWeightregular | medium | semibold | boldOverrides style weight.
lineHeightTextSizeToken | numberLine-height override.
maxLinesnumberLine clamp on web; numberOfLines on RN.
asTextElementWeb-only semantic element.

Platform Support

React

Supports semantic textStyle, element polymorphism, maxLines, and CSS text controls.

React Native

Supports semantic textStyle, maxLines, selectable Article context, and native text props.

Usage

<Text as="h2" textStyle="t7Bold" maxLines={2}>Title</Text>

Notes

  • Prefer textStyle over piecemeal typography props.
  • RN Text inside Article becomes selectable unless explicitly overridden.