Components
Text
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { Text } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
variant | — | "body" | Type scale, following the iOS text styles. Sets size and line height only — weight and colour are separate. |
color | — | "primary" | Emphasis, not hue. primary inherits the surrounding colour; the other three step down through the foreground and muted tokens. |
className | — | — | Utilities layered on top. Weight, alignment and any one-off colour go here rather than through color. |
Examples
Scale
The full type scale, top to bottom — the reference for picking a variant.
<View className="gap-4">
{VARIANTS.map(variant => (
<View key={variant} className="gap-1">
<Text variant="caption2" color="tertiary" className="font-mono uppercase">
{variant}
</Text>
<Text variant={variant}>The quick brown fox</Text>
</View>
))}
</View>Colors
The four emphasis levels, all at body size.
<View className="gap-3">
{COLORS.map(color => (
<Text key={color} color={color}>
{color}
{' — '}
the quick brown fox jumps over the lazy dog
</Text>
))}
</View>