AvaCloud UI Kit
Components

Identity

AddressChip

Use AddressChip when you need a compact, readable address surface in tables, wallet summaries, activity rows, or compact cards.

No provider requiredDisplay primitive

Best for

Lists and summaries

A small surface for showing addresses without committing full horizontal space.

Interaction

Optional click handler

Use it for copy-to-clipboard or open-wallet-profile actions.

Basic usage

Display a single wallet address with truncation and hover-to-scroll overflow handling.

0xA1b2C3d4E5F6789012345678901234567890ABCD
Basic usage
import { AddressChip } from '@avalabs/avacloud-kit-ui-preview';export function Example() {return <AddressChip address="0xA1b2C3d4E5F6789012345678901234567890ABCD" />;}

Clickable chip

Add a click handler when the address should trigger copy, navigation, or account selection.

Clickable chip
<AddressChipaddress="0xA1b2C3d4E5F6789012345678901234567890ABCD"onClick={(address) => navigator.clipboard.writeText(address)}/>

Pair it with an identicon

Enable the identicon when the address needs a fast visual anchor in dense interfaces.

0xA1b2C3d4E5F6789012345678901234567890ABCD0x71C7656EC7ab88b098defB751B7401B5f6d8976F
Pair it with an identicon
<AddressChipaddress="0xA1b2C3d4E5F6789012345678901234567890ABCD"showIdenticon/>

Good default for dense layouts

It keeps addresses readable without turning every row into a full-width monospace block.

Works well with wallet UI

Use it beside balances, network labels, and account actions to keep identity compact.

Props

Prop

Type

On this page