# Align

Align ordnet bekannte Kombinationen von Components korrekt zueinander an.

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

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

---

# Best Practices

- Ersetze `<Align />` durch [Combine](/04-components/structure/combine).
  Funktional ändert sich nichts, der neue Name beschreibt die Component
  treffender.
- Nutze für die Migration den Codemod aus der
  [MIGRATION.md](https://github.com/mittwald/flow/blob/main/packages/components/MIGRATION.md).
- Align gibt zur Laufzeit eine Deprecation-Warnung aus und wird in einer
  zukünftigen Major-Version entfernt. Bis dahin bleibt der alte Pfad abgesichert
  (siehe [Versionierung & Stabilität](/01-get-started/versioning)).

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |
| `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` | - | - |