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


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |


## Guidelines

# Grundlagen

Wir haben die Align Component entwickelt, um häufig wiederkehrende Kombinationen
von Components konsistent darzustellen. Sie sorgt für visuelle und funktionale
Einheitlichkeit in unseren Oberflächen – ohne, dass für jede dieser
Kombinationen eine eigene Component entwickelt werden muss.

## Best practices

Achte bei der Verwendung von Align darauf, dass ...

- nur die im Overview genannten Components kombiniert werden können.
- es nicht als generisches Layout-Tool dient. Für eine freie Anordnung ist
  [Flex](/04-components/structure/flex/overview) vorgesehen.
- neben einer korrekten Anordnung auch visuelle Anpassungen (z. B. das Setzen
  von Farben) vorgenommen werden können.

## Verwendung

Verwende Align, um ...

- vorab definierte Components (z. B.
  [Button](/04-components/actions/button/overview) und
  [TextField](/04-components/form-controls/text-field/overview)) sinnvoll
  anzuordnen.
- wiederkehrende UI-Patterns konsistent umzusetzen.