Text

Body text with a semantic tone, color, size, and weight that follow light and dark mode.

Introduction

Text renders body copy with a semantic tone (default or muted), a color, a size, and a weight. Every color covers light and dark mode, so pages do not repeat text-dark-* dark:text-dark-* class pairs.

When to use: Paragraphs, captions, metadata, money and counts, and small uppercase labels.

Compared to similar components:

• Heading — Section and page titles with a real h1–h6 element.
• Label — Names a form control, with required and error states.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Text } from "@bridge-ui/vue/Components/Text";

import { Text } from "@bridge-ui/react/Components/Text";

Basic usage

Text renders a p in the default tone. Use variant="muted" for subtitles, captions, and metadata.

Sizes

size goes from 2xs to 4xl. The default is md.

Colors

color works with both variants: primary, secondary, success, info, warning, error, dark, and black. The default is dark. global.defaultColor does not apply to Text.

Values, labels, and truncation

numeric aligns digits (tabular figures) for money and counts. uppercase makes a small label with wide tracking. truncate cuts the text to one line with an ellipsis. as changes the element, for example a span inside a sentence or an li in a list.

Defaults and tokens

Set app-wide defaults with components.Text.defaultProps (color, size, variant, weight). components.Text.tokens holds the classes for size, weight, and each variant and color, so the muted tone changes in one place. See Default props and Tokens.

components: {
  Text: {
    defaultProps: { size: "sm" },
    tokens: {
      variant: {
        muted: { dark: "text-dark-600 dark:text-dark-300" },
      },
    },
  },
}

Accessibility

• Text renders a p by default. Pick an element that matches the content with as (span inside a sentence, li in a list, dt / dd in a description list).
• Use Heading for titles, not a large Text, so the page outline stays correct.
• Color is not the only cue: pair success and error values with a sign or a word.

Anatomy

Text renders a single root element:

<p>…</p> <!-- root (element from `as`) -->

Related components

Heading, Card, Label

API