Address Component

The Address component displays Ethereum addresses with automatic ENS resolution, avatar display, and block explorer linking.

Import

import { Address } from "@scaffold-ui/components";

Props

Prop	Type	Default	Description
`address`	`Address`	-	The Ethereum address to display
`disableAddressLink`	`boolean`	`false`	Disable linking to block explorer
`format`	`"short" \| "long"`	`"short"`	Display format for the address
`size`	`"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"base"`	Size of the component
`onlyEnsOrAddress`	`boolean`	`false`	Show only ENS name or address (not both)
`chain`	`Chain`	First chain from WagmiProvider config or `mainnet`	Blockchain network for resolution
`style`	`CSSProperties`	-	Custom CSS styles (memoize to prevent re-renders)

Live Examples

Basic Usage

0xd8dA...6045

import React from "react";
import { Address } from "@scaffold-ui/components";
 
<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />;

Different Sizes

0xd8dA...6045

import React from "react";
import { Address } from "@scaffold-ui/components";
 
<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  size="sm"
/>;
 
<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  size="xl"
/>;

Long Format

0xd8dA...6045

0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045

import React from "react";
import { Address } from "@scaffold-ui/components";
 
<Address
  address="0x1234567890123456789012345678901234567890"
  format="long"
/>;

Disable Block Explorer Link

0xd8dA...6045

import React from "react";
import { Address } from "@scaffold-ui/components";
 
<Address
  address="0x1234567890123456789012345678901234567890"
  disableAddressLink={true}
/>;

ENS or Address Only

0xd8dA...6045

import React from "react";
import { Address } from "@scaffold-ui/components";
 
<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  onlyEnsOrAddress={true}
/>;

Custom Chain

0x1234...7890

import React from "react";
import { polygon } from "viem/chains";
import { Address } from "@scaffold-ui/components";
 
<Address
  address="0x1234567890123456789012345678901234567890"
  chain={polygon}
/>;

Invalid Address Handling

When an invalid Ethereum address is provided, the component displays an error message with "Invalid address" text.

Invalid address0xInvalidAddress123

import React from "react";
import { Address } from "@scaffold-ui/components";
 
// Invalid address - shows error message
<Address address="0xInvalidAddress123" />;