UI component
Text
Text is a lightweight typography primitive for rendering copy with semantic HTML tags, package-owned token colors, and optional access gating.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Text } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
Portable component copy that keeps typography consistent across hosts.
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| children | Provides the copy or inline content to render with consistent typography tokens. |
| as | Chooses the semantic element such as span, paragraph, strong, or small text. |
| tone and weight | Applies semantic foreground colors and font emphasis without ad-hoc class names. |
| truncate | Trims overflowing single-line copy while preserving full text in DOM output. |
| accessRequirements and resolveAccess | Optionally hides content when view access is denied by your host authorization rules. |
Accessibility
Text preserves native semantics through the chosen HTML tag and remains non-interactive by default, which keeps document structure and assistive reading behavior predictable.
Optional access rules
When access rules are provided, Text renders null if view access is denied; without rules or resolver it remains visible.