IntegrationTile

IntegrationTile is a visual component designed to present third-party service integrations in a clean, clickable card format. It displays an integration's icon, name, description, and optional status indicators, making it ideal for integration marketplaces, settings pages, and onboarding flows.

Available from eds-core/1.36.0

Figma Library View in Storybook View in Playroom

Quick Start

Installation: npm install @adaptavant/eds-core
Import: import { IntegrationTile } from '@adaptavant/eds-core';

Basic Usage

IntegrationTile displays a clickable card for integrations. It requires icon, title, description, and onClick props. The component is keyboard accessible and triggers onClick on click, Enter, or Space.

Google Meet

Provide crystal-clear video appointments with your Google Meet.

const [openModal, setOpenModal] = React.useState(false);

function onModalOpen() {
    setOpenModal(true);
    console.log('modal opened');
}

function onModalClose() {
    setOpenModal(false);
    console.log('modal close');
}

return (
	<>
		<IntegrationTile
			aria-expanded={openModal}
			description="Provide crystal-clear video appointments with your Google Meet."
			icon={GoogleMeetingColorIcon}
			onClick={onModalOpen}
			title="Google Meet"
		/>
		<Modal
            descriptionId="modal-description"
            onClose={onModalClose}
            open={openModal}
            role="alertdialog"
            titleId="modal-title"
        >
			<ModalHeader>
				<Heading as="h3" className="text-heading-16 font-stronger" id="modal-title">
					Google Meet
				</Heading>
			</ModalHeader>
			<ModalContent className="gap-2 flex flex-col">
				<Text className="text-body-14" id="modal-description">
					Click the ‘Connect’ button. Select a Google account and click
					‘Continue’. Click ‘Allow’ to grant Setmore access. If you have multiple
					calendars associated with your Google account, select one to connect.
					Select services and classes to provide using Google Meet. When booked,
					links will be added to appointments and sessions automatically.
				</Text>
			</ModalContent>
			<ModalFooter>
				<Button onClick={onModalClose} variant="neutralTertiary">Cancel</Button>
				<Button onClick={onModalClose}>Connect</Button>
			</ModalFooter>
		</Modal>
	</>
)

View in Playroom

Status Badge

The statusBadge prop displays status information in the top-right corner, such as connection status or configuration state.

Connected

Zoom

Enable your team to add Zoom video links to appointments and group sessions.

<IntegrationTile
	description="Enable your team to add Zoom video links to appointments and group sessions."
	icon={ZoomColorIcon}
	onClick={() => alert('Manage Zoom connection')}
	statusBadge={<Badge variant="positiveSecondary">Connected</Badge>}
	title="Zoom"
/>

View in Playroom

Title Adornment

The titleAdornment prop displays supplementary content next to the title, such as premium feature indicators or provider information

Google Meet

Provide crystal-clear video appointments with your Google Meet.

Filevine

via Zapier

Send call details to Filevine to keep case records up to date.

<Box className="flex gap-5">
    <IntegrationTile
        description="Provide crystal-clear video appointments with your Google Meet."
        icon={GoogleMeetingColorIcon}
        onClick={() => alert('Connect Google Meet')}
        title="Google Meet"
        titleAdornment={
            <GetPro
                size="small"
                onClick={() => alert('Upgrade to Pro')}
            />
        }
    />
    <IntegrationTile
        description="Send call details to Filevine to keep case records up to date."
        icon={FilevineColorIcon}
        onClick={() => alert('Opening Filevine connection dialog')}
        title="Filevine"
        titleAdornment={
            <Track 
            className="text-body-12 text-caution gap-1" 
            railStart={<ZapierColorIcon size="16" />}
            >
                via Zapier
            </Track>
        }
    />
</Box>

View in Playroom

API Reference