UI components
Privy provides a UserPill
component to easily embed in your application. Users can login or connect their wallet from the user pill. Once authenticated, users can interact with the pill to quickly view their account information and use their wallets.
Usage
To use the user pill component, import from the @privy-io/react-auth
package:
Then, embed the user pill within any component wrapped by your PrivyProvider
:
You can also customize the user pill by passing the props describing the desired action, label, and size for the component. See more on these props below.
Customizing via props
Privy allows you to easily customize the user pill within your app by passing action
, label
, and/or size
props on the component.
Prop | Type | Description |
---|---|---|
See below | The action users take from the user pill. | |
The size (in pixels) of the pill button. | ||
Action prop
The action prop describes the action the user can take from the UserPill
component. This prop is an object with a type
and options
field.
You can set the type
to:
'connectWallet'
to guide the user to connect their wallet. Iftype: 'connectWallet'
is set, you may setoptions: {suggestedAddress?: string}
to suggest a specific address for the user to connect.'login'
to guide the user to login to your application with any of your configured login methods. Iftype: 'login'
is set, you may setoptions
to an object containingloginMethods
and/orprefill
. TheloginMethods
field contains an array of the login methods to use in the pill and theprefill
field contains an email address or phone number to prefill into the Privy login modal.
Concretely, this type looks like
Was this page helpful?