# LabeledValue

Das LabeledValue zeigt eine statische Information und setzt sie durch ein beschreibendes Label in den passenden Kontext.

## Overview

# Playground

Verwende `<LabeledValue />`, um ein LabeledValue darzustellen. Das LabeledValue
setzt sich aus einem [Label](/04-components/content/label/overview) und dem
`<Content />` zusammen.

```tsx
import {
  Content,
  Label,
  LabeledValue,
} from "@mittwald/flow-react-components";

<LabeledValue>
  <Label>Speicherplatz</Label>
  <Content>20 GB</Content>
</LabeledValue>
```

---

# Kombiniere mit ...

Der Content-Bereich des LabeledValue kann entweder **Text**, **InlineCode** oder
einen **Link** beinhalten. Jeder Content kann zudem durch einen **CopyButton**
ergänzt werden.

## InlineCode

Mit `<InlineCode />` anstelle von `<Content />` kann ein
[InlineCode](/04-components/content/inline-code/overview) angezeigt werden.

```tsx
import {
  InlineCode,
  Label,
  LabeledValue,
} from "@mittwald/flow-react-components";

<LabeledValue>
  <Label>Datenbankserver</Label>
  <InlineCode>
    mysql-kq3v4g.ge-s-hopovh.db.project.host
  </InlineCode>
</LabeledValue>
```

## Link

Nutze einen `<Link />` anstelle von `<Content />`, um einen
[Link](/04-components/navigation/link/overview) anzuzeigen.

```tsx
import {
  Label,
  LabeledValue,
  Link,
} from "@mittwald/flow-react-components";

<LabeledValue>
  <Label>Server</Label>
  <Link>MyServ-01</Link>
</LabeledValue>
```

## CopyButton

Verwende `<CopyButton />` innerhalb des `<LabeledValue />`, um einen
[CopyButton](/04-components/actions/copy-button/overview) am Ende des Contents
anzuzeigen.

```tsx
import {
  Content,
  CopyButton,
  Label,
  LabeledValue,
} from "@mittwald/flow-react-components";

<LabeledValue>
  <Label>Short-ID</Label>
  <Content>p-wut3uw</Content>
  <CopyButton text="p-wut3uw" />
</LabeledValue>
```