Identity Button

The IdentityButton is a reference implementation of a UI widget that leverages the GatewayProvider to communicate to your users the status of their Civic Pass.
It changes appearance with text and icons to indicate when the user needs to take action and can be clicked by the user at any point in the process. The initial click on the button by a user will initiate 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 already have updated to show the 'Active' status.
Once the user has gone through the issuance flow via the Civic Modal, any subsequent click will launch the Civic compliance iframe with a screen describing the current status of the flow.
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
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} />
The Identity Button displaying different Civic Pass states
​
​

Solana

Sample Project

Last modified 19d 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