Design systemIntegration card
One data source on the Integrations page: its logo, category, a line about what it does, and the action for its state.
import { IntegrationCard } from "@/ui";IntegrationCard matches the Figma Integration Card component. It is used on the standalone Settings page. The real Integrations page in settings/integrations still has its own card component, which reads cardData and runs the connect flow. Move it onto this one when you next work there.
States
The state decides the action. Each card shows exactly one.
<IntegrationCard name="Slack" logoSrc={slack} category="Database Management" status="not-connected" description="…" onConnect={connect} />
<IntegrationCard … status="connected" onConnect={openDetails} />
<IntegrationCard … status="coming-soon" onNotify={notifyMe} />status | Header | Action |
|---|---|---|
not-connected | Name | primary Button, "Connect" |
connected | Name and a green SealCheck | secondary Button, "View Details" |
coming-soon | Name and a blueGhost "Notify Me" Button with a bell | Light blue "Coming Soon" label that cannot be clicked |
onConnect runs for both Connect and View Details. Check status in your handler to tell them apart.
Categories
Each category has its own tag tint, taken from Figma. Pass the category name and the tint follows. Use categoryColor with any Tag colour name for a category Figma does not list.
| Category | Tint | Token |
|---|---|---|
| Database Management | #E0FDFF | --color-tag-blue |
| Customer Engagement | #E8FFE0 | --color-tag-green |
| Marketing Automation | #FCE9F4 | --color-tag-pink |
| Web Analytics | #FFEFE0 | --color-tag-orange |
| CRM | #EEE0FF | --color-tag-purple |
| Project Management Insights | #EBFFF3 | --color-tag-success-green |
Figma calls the Web Analytics tint "Tags/Yellow", but its hex (#FFEFE0) is our --color-tag-orange. Code goes by the hex.
Try it
Click Connect, then View Details, to switch the state.
Anatomy
| Part | Spec |
|---|---|
| Card | 400px wide, 24px padding, 16px gaps, white, 8px radius, no border |
| Header | 32px tall. Logo 24px, 16px gap to the name (14px medium) |
| Category | 12px text on the category tint, 2px 12px padding, 12px radius |
| Description | 12px secondary text, three lines (56px) at most |
| Action | Medium Button, 32px |
The card has no border, so put it on a grey page (--color-grey-50), as Settings does.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
name | string | "Slack" | |
logoSrc | string | Square logo, shown at 24px. Files are in public/logos/integrations. | |
category | string | "" | Hidden when empty. |
categoryColor | Tag colour name | from category | Falls back to blue. |
description | string | "" | Cut to three lines. |
status | "not-connected" | "connected" | "coming-soon" | "not-connected" | |
onConnect | function | Connect and View Details. | |
onNotify | function | Notify Me. | |
className | string | "" | For layout only. |
Do and don't
- Do describe what the person gets from connecting, in one sentence.
- Do keep cards in a grid with a 16px gap.
- Don't add a second action. Settings for a connected source go behind View Details.