Empty state with call to action

Block recipe

Use this block when a list or panel has nothing to show yet and one action would fill it, such as creating the first campaign. It explains what is missing and puts the action that creates it front and center. Keep it in place of the content it stands in for, inside the same panel.

Preview

No campaigns yet

Campaigns send messages to people when they match a trigger you choose. Create one to start reaching your audience.

Source

import {
	Button,
	EmptyState,
	EmptyStateActions,
	EmptyStateDescription,
	EmptyStateTitle,
	Panel,
	PanelSection,
} from '@customerio/pluma-components/react';

export interface EmptyStateCtaProps {
	/** Called when the primary action is activated. */
	onCreate: () => void;
}

export function EmptyStateCta({ onCreate }: EmptyStateCtaProps) {
	return (
		<Panel>
			<PanelSection>
				<EmptyState>
					<EmptyStateTitle icon="campaigns">No campaigns yet</EmptyStateTitle>
					<EmptyStateDescription>
						Campaigns send messages to people when they match a trigger you choose. Create one to start reaching your
						audience.
					</EmptyStateDescription>
					<EmptyStateActions>
						<Button variant="primary" icon="add" onClick={onCreate}>
							Create campaign
						</Button>
					</EmptyStateActions>
				</EmptyState>
			</PanelSection>
		</Panel>
	);
}

Scaffold

Copy this recipe into your app with the Pluma CLI. Replace <dest-dir> with the folder the file goes in, and add --name <Name> to rename the component and its file.

pluma-cli scaffold empty-state-cta <dest-dir> --framework react

Components

This recipe uses these components. Each one's docs page lists its props.