Pass Status 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
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} />
Last modified 1mo ago