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


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |


## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung einer BigNumber darauf, dass ...

- der dargestellte Wert für die User eine unmittelbare Relevanz oder
  Aussagekraft besitzt.
- ausreichend Raum zur Verfügung steht, damit die Zahl optisch wirken kann und
  nicht mit anderen Elementen konkurriert. Nutze dafür zum Beispiel die
  [AccentBox](/04-components/structure/accent-box/overview).
- eine Kombination mit anderen Components – etwa einem
  [Rating](/04-components/content/rating/overview) – den Informationsgehalt
  erhöht.

## Verwendung

Verwende eine BigNumber, um ...

- zentrale Kennzahlen auf einem Dashboard schnell erfassbar zu machen.
- den Fokus gezielt auf einen einzelnen Wert zu lenken.
- in Kombination mit einer
  [AccentBox](/04-components/structure/accent-box/overview) eine visuelle
  Gruppierung aus Wert und Beschreibung zu schaffen.
- durch Ergänzung mit einem [Rating](/04-components/content/rating/overview)
  zusätzliche Einordnung oder Bewertung zu ermöglichen.