# Align

Align dient dazu, ausgewählte Components gezielt miteinander zu kombinieren - inklusive Anordnung und visueller Anpassungen (z. B. Farbänderungen).

## Overview

Nutze folgende Components innerhalb von `<Align />`, um sie zu kombinieren.

# Avatar + Text

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

<Align>
  <Avatar>
    <Initials>Max Mustermann</Initials>
  </Avatar>
  <Text>
    <strong>Max Mustermann</strong>
    Organisationsinhaber
  </Text>
</Align>
```

---

# Input + Button

```tsx
import {
  Align,
  Button,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<Align>
  <TextField>
    <Label>Weiterleitungsziel</Label>
  </TextField>
  <Button>Hinzufügen</Button>
</Align>
```

---

# Text + CopyButton

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

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

---

# Icon + Text

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

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

---

# Text + ContextualHelp

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

<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>
```