Text

<script setup lang="ts">
import MtText from "@shopware-ag/meteor-component-library/MtText";
</script>

<template>
  <mt-text>Text</mt-text>
</template>

Usage

Text is the base typography component for body copy, labels, headings, and supporting descriptions. Use it when you need consistent typography across content and interface text, and when the semantic HTML element and the visual text style should be chosen separately.

import { MtText } from "@shopware-ag/meteor-component-library";

Examples

Sizes

<script setup lang="ts">
import MtText from "@shopware-ag/meteor-component-library/MtText";
</script>

<template>
  <mt-text size="2xs">2xs - Text</mt-text>
  <mt-text size="xs">xs - Text</mt-text>
  <mt-text size="s">s - Text</mt-text>
  <mt-text size="m">m - Text</mt-text>
  <mt-text size="l">l - Text</mt-text>
  <mt-text size="xl">xl - Text</mt-text>
  <mt-text size="2xl">2xl - Text</mt-text>
  <mt-text size="3xl">3xl - Text</mt-text>
</template>

API reference

Props

Slots

Best practices

Behavior

• Text renders as a semantic element through the as prop and defaults to a paragraph.
• size, weight, and color control the visual style while the content stays in the default slot.
• Larger sizes use the heading font tokens, while smaller sizes use the body font tokens.

Accessibility

• Use the as prop to preserve the correct document structure, especially for headings.
• Do not rely on visual styling alone to communicate hierarchy if semantic headings are required.
• Keep color choices readable against the background and aligned with contrast requirements.