# Balance Component

The `Balance` component displays the native token balance (e.g., ETH, MATIC) for Ethereum addresses with support for USD conversion and interactive toggling.

## Import

```tsx
import { Balance } from "@scaffold-ui/components";
```

## Props

| Prop             | Type            | Default                      | Description                                            |
| ---------------- | --------------- | ---------------------------- | ------------------------------------------------------ |
| `address`        | `Address`       | -                            | **Required.** The Ethereum address to show balance for |
| `chain`          | `Chain`         | First chain from [WagmiProvider](https://wagmi.sh/react/api/WagmiProvider) config or `mainnet` | Blockchain network to query                            |
| `defaultUsdMode` | `boolean`       | `false`                      | Start in USD display mode                              |
| `style`          | `CSSProperties` | -                            | Custom CSS styles (memoize to prevent re-renders)      |

## Live Examples

### Basic Usage

<DocsProvider>
  <Balance address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />
</DocsProvider>

```tsx
<Balance address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />
```

### Default USD Mode

<DocsProvider>
  <Balance address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" defaultUsdMode={true} />
</DocsProvider>

```tsx
<Balance
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  defaultUsdMode={true}
/>
```

### Custom Chain

<DocsProvider>
  <Balance address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" chain={polygon} />
</DocsProvider>

```tsx
import { polygon } from "viem/chains";

<Balance
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  chain={polygon}
/>;
```