Text

Text is the base body-typography primitive.

Overview

Text is the core body typography layer. It is driven by shared theme tokens and one internal custom property for text color.

Public CSS Variables

The quick brown fox jumps over the lazy dog.

Variable	Value	Affects
local text-color overrideroot		No visible change in this state
body font familyroot		No visible change in this state
default readable text colorroot fallback		No visible change in this state
body size mappingsize scale	—	No visible change in this state
body line-height mappingsize scale	—	No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root consumes:

--t-color, falling back to --text-color
--default-font-family
size-specific font-size and line-height tokens

State And Variant Interaction

weight is controlled through data-font-weight
size is controlled through data-size
Text does not define dedicated error or disabled variants; those are usually expressed through color overrides

Examples

Local color override

--t-color is a custom property, so it inherits: set on a wrapper, it recolors every Text inside, and a single Text can override it again. A plain color on the wrapper would not reach them, because each Text sets its own color.

LTRRTL

local-color-override.tsx · 17 lines

import { Text } from '@vega-ui/react';
import type { CSSProperties } from 'react';

export default function LocalColorOverride() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-4)', width: '100%' }}>
      <Text size={3}>Starter plan, billed monthly</Text>
      <div style={{ display: 'grid', gap: 'var(--spacing-1)', '--t-color': 'var(--label-secondary)' } as CSSProperties}>
        <Text size={2}>Renews on April 1</Text>
        <Text size={2}>Visa ending in 4242</Text>
        <Text size={2} style={{ '--t-color': 'var(--color-error)' } as CSSProperties}>
          Card expires this month

Size scale

A lead paragraph, body copy and fine print use steps of the size scale instead of arbitrary font sizes, so line heights stay consistent.

LTRRTL

larger-body-copy.tsx · 18 lines

import { Text } from '@vega-ui/react';
import type { CSSProperties } from 'react';

export default function LargerBodyCopy() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)', width: '100%', maxWidth: '60ch' }}>
      <Text asChild size={5}>
        <p>Ship design changes to every product from one set of tokens.</p>
      </Text>
      <Text asChild size={3}>
        <p>Update a color or radius once and every app that uses the theme picks it up on the next build.</p>
      </Text>

Do Not Override

bypassing the shared text scale with arbitrary hard-coded font sizes
making primary body copy use placeholder-like colors by default