Text

const Text: NamedExoticComponent<{ about?: string; accessKey?: string; align?: TextAlign; aria-activedescendant?: string; aria-atomic?: Booleanish; aria-autocomplete?: "none" | "inline" | "both" | "list"; aria-braillelabel?: string; aria-brailleroledescription?: string; aria-busy?: Booleanish; aria-checked?: boolean | "mixed" | "false" | "true"; aria-colcount?: number; aria-colindex?: number; aria-colindextext?: string; aria-colspan?: number; aria-controls?: string; aria-current?: boolean | "page" | "false" | "true" | "step" | "location" | "date" | "time"; aria-describedby?: string; aria-description?: string; aria-details?: string; aria-disabled?: Booleanish; aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"; aria-errormessage?: string; aria-expanded?: Booleanish; aria-flowto?: string; aria-grabbed?: Booleanish; aria-haspopup?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree"; aria-hidden?: Booleanish; aria-invalid?: boolean | "false" | "true" | "grammar" | "spelling"; aria-keyshortcuts?: string; aria-label?: string; aria-labelledby?: string; aria-level?: number; aria-live?: "off" | "assertive" | "polite"; aria-modal?: Booleanish; aria-multiline?: Booleanish; aria-multiselectable?: Booleanish; aria-orientation?: "horizontal" | "vertical"; aria-owns?: string; aria-placeholder?: string; aria-posinset?: number; aria-pressed?: boolean | "mixed" | "false" | "true"; aria-readonly?: Booleanish; aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; aria-required?: Booleanish; aria-roledescription?: string; aria-rowcount?: number; aria-rowindex?: number; aria-rowindextext?: string; aria-rowspan?: number; aria-selected?: Booleanish; aria-setsize?: number; aria-sort?: "none" | "ascending" | "descending" | "other"; aria-valuemax?: number; aria-valuemin?: number; aria-valuenow?: number; aria-valuetext?: string; as?: TextElement; autoCapitalize?: "none" | string & object | "off" | "on" | "sentences" | "words" | "characters"; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; children: ReactNode; className?: string; color?: TextColor; content?: string; contentEditable?: "inherit" | Booleanish | "plaintext-only"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; draggable?: Booleanish; enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send"; exportparts?: string; hidden?: boolean; id?: string; inert?: boolean; inlist?: any; inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; lang?: string; lineHeight?: TextLineHeight; maxLines?: number; mono?: boolean; nonce?: string; nowrap?: boolean; onAbort?: ReactEventHandler<HTMLElement>; onAbortCapture?: ReactEventHandler<HTMLElement>; onAnimationEnd?: AnimationEventHandler<HTMLElement>; onAnimationEndCapture?: AnimationEventHandler<HTMLElement>; onAnimationIteration?: AnimationEventHandler<HTMLElement>; onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>; onAnimationStart?: AnimationEventHandler<HTMLElement>; onAnimationStartCapture?: AnimationEventHandler<HTMLElement>; onAuxClick?: MouseEventHandler<HTMLElement>; onAuxClickCapture?: MouseEventHandler<HTMLElement>; onBeforeInput?: InputEventHandler<HTMLElement>; onBeforeInputCapture?: InputEventHandler<HTMLElement>; onBeforeToggle?: ToggleEventHandler<HTMLElement>; onBlur?: FocusEventHandler<HTMLElement>; onBlurCapture?: FocusEventHandler<HTMLElement>; onCanPlay?: ReactEventHandler<HTMLElement>; onCanPlayCapture?: ReactEventHandler<HTMLElement>; onCanPlayThrough?: ReactEventHandler<HTMLElement>; onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>; onChange?: ChangeEventHandler<HTMLElement, Element>; onChangeCapture?: ChangeEventHandler<HTMLElement, Element>; onClick?: MouseEventHandler<HTMLElement>; onClickCapture?: MouseEventHandler<HTMLElement>; onCompositionEnd?: CompositionEventHandler<HTMLElement>; onCompositionEndCapture?: CompositionEventHandler<HTMLElement>; onCompositionStart?: CompositionEventHandler<HTMLElement>; onCompositionStartCapture?: CompositionEventHandler<HTMLElement>; onCompositionUpdate?: CompositionEventHandler<HTMLElement>; onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>; onContextMenu?: MouseEventHandler<HTMLElement>; onContextMenuCapture?: MouseEventHandler<HTMLElement>; onCopy?: ClipboardEventHandler<HTMLElement>; onCopyCapture?: ClipboardEventHandler<HTMLElement>; onCut?: ClipboardEventHandler<HTMLElement>; onCutCapture?: ClipboardEventHandler<HTMLElement>; onDoubleClick?: MouseEventHandler<HTMLElement>; onDoubleClickCapture?: MouseEventHandler<HTMLElement>; onDrag?: DragEventHandler<HTMLElement>; onDragCapture?: DragEventHandler<HTMLElement>; onDragEnd?: DragEventHandler<HTMLElement>; onDragEndCapture?: DragEventHandler<HTMLElement>; onDragEnter?: DragEventHandler<HTMLElement>; onDragEnterCapture?: DragEventHandler<HTMLElement>; onDragExit?: DragEventHandler<HTMLElement>; onDragExitCapture?: DragEventHandler<HTMLElement>; onDragLeave?: DragEventHandler<HTMLElement>; onDragLeaveCapture?: DragEventHandler<HTMLElement>; onDragOver?: DragEventHandler<HTMLElement>; onDragOverCapture?: DragEventHandler<HTMLElement>; onDragStart?: DragEventHandler<HTMLElement>; onDragStartCapture?: DragEventHandler<HTMLElement>; onDrop?: DragEventHandler<HTMLElement>; onDropCapture?: DragEventHandler<HTMLElement>; onDurationChange?: ReactEventHandler<HTMLElement>; onDurationChangeCapture?: ReactEventHandler<HTMLElement>; onEmptied?: ReactEventHandler<HTMLElement>; onEmptiedCapture?: ReactEventHandler<HTMLElement>; onEncrypted?: ReactEventHandler<HTMLElement>; onEncryptedCapture?: ReactEventHandler<HTMLElement>; onEnded?: ReactEventHandler<HTMLElement>; onEndedCapture?: ReactEventHandler<HTMLElement>; onError?: ReactEventHandler<HTMLElement>; onErrorCapture?: ReactEventHandler<HTMLElement>; onFocus?: FocusEventHandler<HTMLElement>; onFocusCapture?: FocusEventHandler<HTMLElement>; onGotPointerCapture?: PointerEventHandler<HTMLElement>; onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>; onInput?: InputEventHandler<HTMLElement>; onInputCapture?: InputEventHandler<HTMLElement>; onInvalid?: ReactEventHandler<HTMLElement>; onInvalidCapture?: ReactEventHandler<HTMLElement>; onKeyDown?: KeyboardEventHandler<HTMLElement>; onKeyDownCapture?: KeyboardEventHandler<HTMLElement>; onKeyPress?: KeyboardEventHandler<HTMLElement>; onKeyPressCapture?: KeyboardEventHandler<HTMLElement>; onKeyUp?: KeyboardEventHandler<HTMLElement>; onKeyUpCapture?: KeyboardEventHandler<HTMLElement>; onLoad?: ReactEventHandler<HTMLElement>; onLoadCapture?: ReactEventHandler<HTMLElement>; onLoadedData?: ReactEventHandler<HTMLElement>; onLoadedDataCapture?: ReactEventHandler<HTMLElement>; onLoadedMetadata?: ReactEventHandler<HTMLElement>; onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>; onLoadStart?: ReactEventHandler<HTMLElement>; onLoadStartCapture?: ReactEventHandler<HTMLElement>; onLostPointerCapture?: PointerEventHandler<HTMLElement>; onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>; onMouseDown?: MouseEventHandler<HTMLElement>; onMouseDownCapture?: MouseEventHandler<HTMLElement>; onMouseEnter?: MouseEventHandler<HTMLElement>; onMouseLeave?: MouseEventHandler<HTMLElement>; onMouseMove?: MouseEventHandler<HTMLElement>; onMouseMoveCapture?: MouseEventHandler<HTMLElement>; onMouseOut?: MouseEventHandler<HTMLElement>; onMouseOutCapture?: MouseEventHandler<HTMLElement>; onMouseOver?: MouseEventHandler<HTMLElement>; onMouseOverCapture?: MouseEventHandler<HTMLElement>; onMouseUp?: MouseEventHandler<HTMLElement>; onMouseUpCapture?: MouseEventHandler<HTMLElement>; onPaste?: ClipboardEventHandler<HTMLElement>; onPasteCapture?: ClipboardEventHandler<HTMLElement>; onPause?: ReactEventHandler<HTMLElement>; onPauseCapture?: ReactEventHandler<HTMLElement>; onPlay?: ReactEventHandler<HTMLElement>; onPlayCapture?: ReactEventHandler<HTMLElement>; onPlaying?: ReactEventHandler<HTMLElement>; onPlayingCapture?: ReactEventHandler<HTMLElement>; onPointerCancel?: PointerEventHandler<HTMLElement>; onPointerCancelCapture?: PointerEventHandler<HTMLElement>; onPointerDown?: PointerEventHandler<HTMLElement>; onPointerDownCapture?: PointerEventHandler<HTMLElement>; onPointerEnter?: PointerEventHandler<HTMLElement>; onPointerLeave?: PointerEventHandler<HTMLElement>; onPointerMove?: PointerEventHandler<HTMLElement>; onPointerMoveCapture?: PointerEventHandler<HTMLElement>; onPointerOut?: PointerEventHandler<HTMLElement>; onPointerOutCapture?: PointerEventHandler<HTMLElement>; onPointerOver?: PointerEventHandler<HTMLElement>; onPointerOverCapture?: PointerEventHandler<HTMLElement>; onPointerUp?: PointerEventHandler<HTMLElement>; onPointerUpCapture?: PointerEventHandler<HTMLElement>; onProgress?: ReactEventHandler<HTMLElement>; onProgressCapture?: ReactEventHandler<HTMLElement>; onRateChange?: ReactEventHandler<HTMLElement>; onRateChangeCapture?: ReactEventHandler<HTMLElement>; onReset?: ReactEventHandler<HTMLElement>; onResetCapture?: ReactEventHandler<HTMLElement>; onScroll?: UIEventHandler<HTMLElement>; onScrollCapture?: UIEventHandler<HTMLElement>; onScrollEnd?: UIEventHandler<HTMLElement>; onScrollEndCapture?: UIEventHandler<HTMLElement>; onSeeked?: ReactEventHandler<HTMLElement>; onSeekedCapture?: ReactEventHandler<HTMLElement>; onSeeking?: ReactEventHandler<HTMLElement>; onSeekingCapture?: ReactEventHandler<HTMLElement>; onSelect?: ReactEventHandler<HTMLElement>; onSelectCapture?: ReactEventHandler<HTMLElement>; onStalled?: ReactEventHandler<HTMLElement>; onStalledCapture?: ReactEventHandler<HTMLElement>; onSubmit?: SubmitEventHandler<HTMLElement>; onSubmitCapture?: SubmitEventHandler<HTMLElement>; onSuspend?: ReactEventHandler<HTMLElement>; onSuspendCapture?: ReactEventHandler<HTMLElement>; onTimeUpdate?: ReactEventHandler<HTMLElement>; onTimeUpdateCapture?: ReactEventHandler<HTMLElement>; onToggle?: ToggleEventHandler<HTMLElement>; onTouchCancel?: TouchEventHandler<HTMLElement>; onTouchCancelCapture?: TouchEventHandler<HTMLElement>; onTouchEnd?: TouchEventHandler<HTMLElement>; onTouchEndCapture?: TouchEventHandler<HTMLElement>; onTouchMove?: TouchEventHandler<HTMLElement>; onTouchMoveCapture?: TouchEventHandler<HTMLElement>; onTouchStart?: TouchEventHandler<HTMLElement>; onTouchStartCapture?: TouchEventHandler<HTMLElement>; onTransitionCancel?: TransitionEventHandler<HTMLElement>; onTransitionCancelCapture?: TransitionEventHandler<HTMLElement>; onTransitionEnd?: TransitionEventHandler<HTMLElement>; onTransitionEndCapture?: TransitionEventHandler<HTMLElement>; onTransitionRun?: TransitionEventHandler<HTMLElement>; onTransitionRunCapture?: TransitionEventHandler<HTMLElement>; onTransitionStart?: TransitionEventHandler<HTMLElement>; onTransitionStartCapture?: TransitionEventHandler<HTMLElement>; onVolumeChange?: ReactEventHandler<HTMLElement>; onVolumeChangeCapture?: ReactEventHandler<HTMLElement>; onWaiting?: ReactEventHandler<HTMLElement>; onWaitingCapture?: ReactEventHandler<HTMLElement>; onWheel?: WheelEventHandler<HTMLElement>; onWheelCapture?: WheelEventHandler<HTMLElement>; part?: string; popover?: "" | "auto" | "manual" | "hint"; popoverTarget?: string; popoverTargetAction?: "hide" | "show" | "toggle"; prefix?: string; property?: string; radioGroup?: string; ref?: Ref<HTMLElement>; rel?: string; resource?: string; results?: number; rev?: string; role?: AriaRole; security?: string; size?: TextSize; slot?: string; spellCheck?: Booleanish; style?: CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; testId?: string; title?: string; translate?: "yes" | "no"; truncate?: boolean; typeof?: string; unselectable?: "off" | "on"; variant?: TextVariant; vocab?: string; weight?: TextWeight; }>

Defined in: src/components/primitives/Text/Text.tsx:210

A versatile text component for consistent typography in editor interfaces.

Provides semantic variants, flexible sizing, and comprehensive text styling options optimized for professional editor UIs. Uses theme typography tokens for consistent spacing and sizing across the application.

Example

// Semantic variants
<Text variant="display">Main Title</Text>
<Text variant="heading">Section Heading</Text>
<Text variant="body">Regular paragraph text</Text>
<Text variant="caption">Small helper text</Text>
<Text variant="code">console.log('hello')</Text>

// Custom sizing and colors
<Text size="lg" weight="semibold" color="accent">
  Custom styled text
</Text>

// With truncation
<Text truncate maxLines={2}>
  Long text that will be truncated after two lines...
</Text>

// Different HTML elements
<Text as="h1" variant="display">Page Title</Text>
<Text as="p" variant="body">Paragraph content</Text>
<Text as="label" variant="caption">Form label</Text>