search

InfoCard

A component that displays data in an ItemCard or ProfileImage with optional dropdown details. Supports both fetching data via useExecuteRequest or using already-fetched data.

hashtag
Installation

import { InfoCard } from 'uxp/components';

hashtag
Signature

const InfoCard: React.FunctionComponent<InfoCardProps>

hashtag
Examples

With executeConfig (InfoCard fetches data):

<InfoCard data={{ executeConfig: { type: 'action', model: 'User', action: 'GetDetails', parameters: { id: '123' } } }} fields={{ image: 'avatar', title: 'name', subtitle: 'email' }} details={(item) => ({ fields: [ { label: 'Phone', value: item.phone }, { label: 'Department', value: item.department } ] })} />


```tsx
With direct data (already fetched):

<InfoCard data={{ avatar: 'https://example.com/avatar.jpg', name: 'John Doe', email: '[email protected]', phone: '123-456-7890', department: 'Engineering' }} fields={{ image: 'avatar', title: 'name', subtitle: 'email' }} details={(item) => (

Phone: {item.phone}

Department: {item.department}

)} dropdownPosition="bottom-right" />

<InfoCard data={{ avatar: 'https://example.com/avatar.jpg', name: 'John Doe' }} fields={{ image: 'avatar', name: 'name' }} variant="avatar" size="large" shape="circle" details={(item) => (

User: {item.name})} />

PreviousIconPickerNextInfoCardGroup

Last updated