Text

Komponen untuk paragraf, label, caption, code inline. 5 sizes × 4 variants × 4 weights.

import { Text } from "@naraya/ui";

Default

Naraya Design System untuk ekosistem digital.

<Text>Naraya Design System...</Text>

Sizes

xs · captions, micro-copy

sm · secondary, help label

base · body default

lg · intro, subtitle

xl · lead text

<Text size="xs">...</Text>
<Text size="sm">...</Text>
<Text size="base">...</Text>
<Text size="lg">...</Text>
<Text size="xl">...</Text>

Variants

Body — paragraf default.

Muted — secondary, label.

LABEL — uppercase micro-label.const naraya = "design";

<Text variant="body">...</Text>
<Text variant="muted">...</Text>
<Text variant="label">...</Text>
<Text variant="code">...</Text>

Weights

Regular (400)

Medium (500)

Semibold (600)

Bold (700)

<Text weight="regular">...</Text>
<Text weight="medium">...</Text>
<Text weight="semibold">...</Text>
<Text weight="bold">...</Text>

Semantic tone

Primary

Success

Warning

Error

<Text tone="success">Berhasil</Text>
<Text tone="error">Gagal</Text>

Truncate

Lorem ipsum dolor sit amet consectetur adipisicing elit

<Text truncate>Lorem ipsum dolor sit amet...</Text>

Prop	Type	Default	Description
size	`"xs" \| "sm" \| "base" \| "lg" \| "xl"`	`"base"`	Font size.
weight	`"regular" \| "medium" \| "semibold" \| "bold"`	`"regular"`	Font weight.
variant	`"body" \| "muted" \| "code" \| "label"`	`"body"`	Style + default tag (p / span / code).
tone	`"primary" \| "accent" \| "info" \| "success" \| "warning" \| "error"`	—	Semantic color tone.
align	`"left" \| "center" \| "right"`	—	Text align.
truncate	`boolean`	`false`	Ellipsis single-line overflow.
as	`ElementType`	—	Override semantic tag.