Skip to main content
Browse docs

Marwes documentation

Text

Non-heading typography component for labels, captions, overline, microcopy, and supporting body text where consumers choose the native element.

What this family solves

Non-heading typography component for labels, captions, overline, microcopy, and supporting body text where consumers choose the native element.

Use when

  • The UI needs label, caption, overline, microcopy, or compact supporting text.
  • The caller needs to choose span, p, or div while reusing Marwes typography variants.
  • React, Vue, and Svelte consumers need the same typography class and native-element contract.

Avoid when

  • The text creates page or section hierarchy; use Heading.
  • The text is long-form body copy; use Paragraph.
  • The text is part of an input state that should use the field component's built-in label, helper, or error slots.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

Text, TypographyText

Types

TextAs, TextComponent, TextProps

Vue — @marwes-ui/vue

Components

Text, TypographyText

Types

TextAs, TextComponent, TextProps

Svelte — @marwes-ui/svelte

Components

Text, TypographyText

Types

TextAs, TextProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/react"

export function Example() {
  return (
    <>
      <Text variant={TextVariant.display}>Display</Text>

      <H1>Heading 1</H1>
      <H2>Heading 2</H2>
      <H3>Heading 3</H3>

      <Paragraph size="md">Body paragraph text.</Paragraph>
      <Paragraph size="sm">Small body paragraph.</Paragraph>

      <Text variant={TextVariant.label}>Label default</Text>
      <Text variant={TextVariant.labelSmall}>Label small</Text>
      <Text variant={TextVariant.caption}>Caption</Text>
      <Text variant={TextVariant.overline}>Overline</Text>
    </>
  )
}

Vue

<script setup lang="ts">
import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/vue"
</script>

<template>
  <Text :variant="TextVariant.display">Display</Text>

  <H1>Heading 1</H1>
  <H2>Heading 2</H2>
  <H3>Heading 3</H3>

  <Paragraph size="md">Body paragraph text.</Paragraph>
  <Paragraph size="sm">Small body paragraph.</Paragraph>

  <Text :variant="TextVariant.label">Label default</Text>
  <Text :variant="TextVariant.labelSmall">Label small</Text>
  <Text :variant="TextVariant.caption">Caption</Text>
  <Text :variant="TextVariant.overline">Overline</Text>
</template>

Svelte

<script lang="ts">
  import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/svelte"
</script>

<Text variant={TextVariant.display}>Display</Text>

<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>

<Paragraph size="md">Body paragraph text.</Paragraph>
<Paragraph size="sm">Small body paragraph.</Paragraph>

<Text variant={TextVariant.label}>Label default</Text>
<Text variant={TextVariant.labelSmall}>Label small</Text>
<Text variant={TextVariant.caption}>Caption</Text>
<Text variant={TextVariant.overline}>Overline</Text>

Accessibility requirements

  • Intentional heading depth: Use headingLevel only when the text is genuinely part of the document outline at that depth.
  • Visual vs semantic separation: Keep variant a visual choice and as/headingLevel the semantic choice; do not conflate the two.
  • Manual review boundary: Typography visual review against current dashboard and typography-adjacent Figma refs.
  • Manual review 2: Product-level review that Text is not used to fake heading hierarchy or long-form paragraph structure.

Theming

Text uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources