Component
Contact
Wraps the device Contact Picker API, only available on Android Chrome today, behind one button. Renders nothing where the API doesn't exist in production; mocked here with a simulated pick so the flow is visible on any browser.
The primitive
contact.tsx
<NativeContact onSelect={(contact) => setPicked(contact)} />Example
Picking a contact through the device picker fills the recipient card directly below it.
Send to a contact
No contact selected yet.
contact-example.tsx
<NativeContact
label="Pick from contacts"
variant="tinted"
onSelect={(contact) => setPicked(contact)}
/>Capabilities
| Prop | Type | Description |
|---|---|---|
| onSelectrequired | (contact: PickedContact) => void | — |
| label | string | — |
| size | "xs" | "sm" | "md" | "lg" | "xl" | — |
| variant | "primary" | "secondary" | "tinted" | "plain" | "outline" | — |
| fullWidth | boolean | — |
| disabled | boolean | — |