# BigNumber

Die BigNumber dient der prominenten Darstellung numerischer Werte innerhalb einer Oberfläche. Sie wird vorrangig eingesetzt, um Kennzahlen oder Metriken übersichtlich und visuell hervorzuheben.

## Overview

# Playground

Verwende `<BigNumber />`, um eine BigNumber darzustellen.

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

<BigNumber>
  <Text>69%</Text>
  <Text>Performance</Text>
</BigNumber>
```

---

# Kombiniere mit ...

## Rating

Nutze das [Rating](/04-components/content/rating/overview), um den Kontext der
BigNumber für die User auf einer Bewertungsskala besser einzuordnen.

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

<Flex direction="column" gap="s" align="center">
  <BigNumber>
    <Text>80%</Text>
    <Text>Performance</Text>
  </BigNumber>
  <Rating aria-label="Performance" value={4} isReadOnly />
</Flex>
```

## AccentBox

Zur visuellen Hervorhebung kann die BigNumber innerhalb einer
[AccentBox](/04-components/structure/accent-box/overview) angezeigt werden.

```tsx
import {
  AccentBox,
  BigNumber,
  Button,
  ColumnLayout,
  Flex,
  Text,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <AccentBox>
    <Flex direction="column" gap="s" align="center">
      <BigNumber>
        <Text>250 ms</Text>
        <Text>Dateioperationen</Text>
      </BigNumber>
      <Text>
        <small>Geringer Optimierungsbedarf</small>
      </Text>
      <Button size="s" variant="outline" color="secondary">
        Details anzeigen
      </Button>
    </Flex>
  </AccentBox>
  <AccentBox>
    <Flex direction="column" gap="xs" align="center">
      <BigNumber>
        <Text>100 ms</Text>
        <Text>Serveroperationen</Text>
      </BigNumber>
      <Text>
        <small>Optimierungsbedarf</small>
      </Text>
      <Button size="s" variant="outline" color="secondary">
        Details anzeigen
      </Button>
    </Flex>
  </AccentBox>
</ColumnLayout>
```