Pass Status UI

For convenience and less code, simply drop the Identity Button widget into your UI. 
It will handle both displaying the user's Civic Pass status and triggering the issuance flow for new users, all without them ever leaving your dApp. 
The Civic Pass Status UI displaying different Civic Pass states
​
Identity Button
The Identity button changes appearance with text and icons to indicate when the user needs to take action. It can be clicked by the user at any point in the process. 
The initial click on the button by a user initiates the Civic Pass modal which will guide the user through the process of issuing their Civic Pass. If a Civic Pass already exists for the connected wallet, the UI will update to show the 'Active' status.
Once the user has gone through the issuance flow via the Civic Pass modal, any subsequent click will launch the Civic Pass iframe with a screen describing the current status of the process.
Property
Description
Values
mode
The default setting of the button is dark. We also provide a light mode.
DARK | LIGHT
animation
The button provides a neat animation on hover. The default value is dark mode
true | false
Solana
Ethereum / Polygon / Arbitrum / XDC
import {
  IdentityButton,
  ButtonMode,
} from '@civic/solana-gateway-react';
​
<IdentityButton mode={ButtonMode.LIGHT} animation={true} />
import {
  IdentityButton,
  ButtonMode,
} from '@civic/ethereum-gateway-react';
​
<IdentityButton mode={ButtonMode.LIGHT} animation={true} />

Civic Pass Structure

On-Chain Integration

Last modified 1mo ago

Property	Description	Values
mode	The default setting of the button is dark. We also provide a `light mode`.	DARK \| LIGHT
animation	The button provides a neat animation on hover. The default value is `dark mode`	true \| false