reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Text
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Text

Component

Apply consistent semantic typography to body text, labels, supporting descriptions, and code.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { Text } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

텍스트 역할과 톤

본문은 body 역할의 semantic token을 사용합니다.

레이블 텍스트보조 설명 텍스트npm install @reopt-ai/opt-ui

Usage guidance

Best practices

  • Choose a variant that matches the content's role instead of setting text size directly.

Usage to avoid

  • Use Heading for document headings instead of enlarging Text.

Theme customization

[data-opt-component="text"][data-opt-part="root"]--opt-text-body-size--opt-text-label-size--opt-text-supporting-size--opt-text-code-size

Scenarios to explore

  • semantic roles

    Verify all text roles and color tones together.

    responsive

Text

PropTypeDefaultDescription
as"span" | "p" | "div" | "label" | "code"—렌더링할 HTML 요소
variant"body" | "label" | "supporting" | "code"—시각적 텍스트 역할
tone"primary" | "secondary" | "tertiary" | "inherit"—의미 기반 텍스트 색상
truncateboolean—한 줄 말줄임 적용
childrenReactNode—텍스트 콘텐츠
View test results

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • renders a semantic text element with a tokenized visual role
  • supports label-specific props when rendering a label
  • keeps semantic heading level independent from visual hierarchy

Related components

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

opt-ui

Facet

Core

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

opt-ui

Expression

Core

Read and edit conditions as sentences for alert rules and segment filters that need to be easy to verify.

opt-ui

TextTruncate

Core

Measure text in its actual font and available width to truncate the start, middle, or both ends while preserving the full accessible text.

opt-ui

Highlight

Core

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

opt-ui

LiveRegion

Core

Announce live updates to screen readers with throttled summaries and alternating nodes that can repeat identical messages.

PreviousKeyPadMenuNextHeading