Live Docs

Typography /

stable

Text

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

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

Examples

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>

Props

PropTypeDefaultDescription
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.
truncatebooleanfalseEllipsis single-line overflow.
asElementTypeOverride semantic tag.