# Text

Die Text-Component sorgt für eine konsistente Formatierung und Strukturierung von Text.

## Overview

# Playground

Um Text zu formatieren und zu gruppieren, schließe ihn mit dem `<Text>`-Tag ein.

```tsx
import { Text } from "@mittwald/flow-react-components";

<Text>Das ist ein Text</Text>
```

---

# Size

Neben der Default-Schriftgröße unterstützt Text auch die Size **Small**. Nutze
das `<small>`-Tag, um sie zu verwenden.

```tsx
import { Text } from "@mittwald/flow-react-components";

<Text>
  <small>Das ist ein Text in small</small>
</Text>
```

---

## HTML-Elemente und Formatierungen

  Kompatibilität mit Remote Components

    Bei der Verwendung von Text als Remote Component wird nicht jede HTML
    Formatierung unterstützt. Aktuell sind dies nur strong, ul, ol, li, small,
    br. Wenn dir etwas fehlt, sag uns gerne auf GitHub Bescheid.

      Feedback geben

Die Text-Component unterstützt alle gängigen Formatierungen und Elemente wie
`<strong>`, `<i>`, `<ul>`, `<ol>` usw.

```tsx
import { Text } from "@mittwald/flow-react-components";

<>
  <Text>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </Text>
  <Text>
    Dies ist ein <strong>Beispiel</strong> für{" "}
    <i>verschiedene</i> HTML-Formatierungen.
  </Text>
</>
```

---

# Mit elementType

Verwende die `elementType`-Property, um festzulegen, welches HTML-Element die
Text-Component rendern soll. Standardmäßig wird ein `<span>` erzeugt. Für
Fließtexte, die als eigenständige Absätze erkennbar sein sollen, verwende
stattdessen ein `<p>`-Element.

```tsx
import { Text } from "@mittwald/flow-react-components";

<Text elementType="p">Das ist ein Absatz</Text>
```

---

# Color

Zusätzlich zur Standard-Color kann Text auch in den Colors **Light** und
**Dark** dargestellt werden. Beide Colors sind Alternativen zur Standard-Color,
falls diese nicht auf farbigen oder dekorativen Hintergründen funktioniert.

## Dark

```tsx
import { Text } from "@mittwald/flow-react-components";

<Text color="dark">Das ist ein Text</Text>
```

### Light

```tsx
import { Text } from "@mittwald/flow-react-components";

<Text color="light">Das ist ein Text</Text>
```

**Light:** Verwende die Light-Color bei dunklen Hintergründen mit einem HSL
Lightness-Wert von weniger als 50.

**Dark:** Verwende die Dark-Color bei hellen, farbigen Hintergründen mit einem
HSL Lightness-Wert von größer als 50.

---

# No ligatures

Verwende die `noLigatures`-Property, um typografische Ligaturen in der
Text-Component zu deaktivieren. Dadurch werden Zeichen unverändert und einzeln
dargestellt.

```tsx
import { Text } from "@mittwald/flow-react-components";

<>
  <Text>
    <b>4x5</b>=20
  </Text>
  <Text>vs.</Text>
  <Text noLigatures>
    Short-ID: p-ah<b>4x5</b>fs
  </Text>
</>
```

---

# Kombiniere mit ...

## Align

Benutze die [Align-Component](/04-components/structure/align/overview), um neben
dem Text z. B. ein Icon, einen CopyButton oder ein ContextualHelp zu platzieren.

```tsx
import {
  Align,
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  CopyButton,
  IconDomain,
  Text,
} from "@mittwald/flow-react-components";

<>
  <Align>
    <IconDomain />
    <Text>mail.agenturserver.de</Text>
  </Align>

  <Align>
    <Text>mail.agenturserver.de</Text>
    <CopyButton text="mail.agenturserver.de" />
  </Align>

  <Align>
    <Text>mail.agenturserver.de</Text>
    <ContextualHelpTrigger>
      <Button />
      <ContextualHelp>
        <Text>
          Hier wird die URL des Servers angezeigt, der für
          den E-Mail-Versand genutzt wird.
        </Text>
      </ContextualHelp>
    </ContextualHelpTrigger>
  </Align>
</>
```