# BigNumber

Die BigNumber stellt Kennzahlen und Metriken prominent dar.

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

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

---

# Best Practices

- Zeige nur Werte mit unmittelbarer Relevanz oder Aussagekraft.
- Gib der Zahl ausreichend Raum. So wirkt sie optisch und konkurriert nicht mit
  anderen Elementen.

---

# Kombiniere mit ...

## Rating

Nutze das [Rating](/04-components/content/rating), 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) 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>
```

---

# Properties

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