Skip to main content
The TokenRow component displays token information in a row format to be used in list components.

​
Usage

Token with an image url 
import { TokenRow } from '@coinbase/onchainkit/token';

const token = { ... };

<TokenRow token={token} />;
Token without an image url 
import { TokenRow } from '@coinbase/onchainkit/token';

const token = { ... };

<TokenRow token={token} />;
Token with an amount 
import { TokenRow } from '@coinbase/onchainkit/token';

const token = { ... };

<TokenRow token={token} amount="1000" />; 
<TokenRow token={token} amount="0.00234567" />;
Variations with hideImage and hideSymbol 
import { TokenRow } from '@coinbase/onchainkit/token';

const token = { ... };

<TokenRow token={token} hideSymbol />; 
<TokenRow token={token} hideImage />; 
<TokenRow token={token} hideSymbol hideImage />;

​
Props

​
TokenRowProps

type TokenRowProps = {
  amount?: string; // Token amount
  className?: string;
  hideImage?: boolean;
  hideSymbol?: boolean;
  onClick?: (token: Token) => void; // Component on click handler
  token: Token; // Rendered token
  as?: React.ElementType;
};