Summary
Summaries pair an avatar (with status badge) with a title, description, and optional link to communicate the current state of something a user has set up or completed. Use them on settings pages and configuration screens — they make great small lists, but keep them short. For longer lists, use a list item instead.
Charitable status savedEIN: 47-2831905 will appear on donation receipts.
Update in Nonprofit Settings →Stripe connectedYour Stripe account is connected and ready to accept payments. Funds go directly to your Stripe account.
Charitable status pendingYour charitable status will appear on receipts once it is approved.
Manage →Stripe not connectedA Stripe account is required to accept payments.
Connect Stripe →preview
props
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'positive' | 'warning' | 'negative' | required | Status badge shown on the avatar. Always required — a Summary always has a sentiment. |
title | string | required | Primary label. Should describe the current state concisely. |
description | string | required | Supporting detail shown below the title. |
link | { label: string; href?: string; onClick?: () => void } | — | Optional action link shown below the description. Supply href for navigation or onClick for in-page actions. |
usage
Use Summary on settings and configuration pages to surface the state of something a user has connected or completed. It works well in small lists of two or three items — if the list grows beyond that, switch to a dedicated list item component.
When to use
- To show the status of a connected integration (e.g. Stripe, Mailchimp)
- To confirm that a configuration step has been saved or is pending approval
- In small groups of 2–3 related summaries on a settings page
Do not use
- In long lists — use a list item component instead
- Without a status — every Summary needs a sentiment to communicate meaning
- For notifications or transient alerts — use Action Prompt instead
DoUse in small groups of related items on settings pages.
Stripe connectedYour Stripe account is active.
Mailchimp connectedYour Mailchimp account is active.
Zapier connectedYour Zapier account is active.
Salesforce connectedYour Salesforce account is active.
HubSpot connectedYour HubSpot account is active.
Don’tUse for long lists — switch to a list item component once the list grows.
status
Stripe connectedReady to accept payments.
Manage →PositiveSomething is set up, connected, or completed successfully.
Charitable status pendingAwaiting approval before appearing on receipts.
Check status →WarningAttention is needed — set up is pending or requires action.
Stripe not connectedA Stripe account is required to accept payments.
Connect →NegativeSomething is broken or missing and must be resolved.