Empty

<Emptyicon={IconCube}title="No workers yet"description="Deploy one and it will show up here with its logs and metrics."action={<Button variant="primary" icon={IconPlus}>Create worker</Button>}hint="Or run heyo deploy from your terminal."/>

Deliberately not a centred icon-in-a-circle over centred text. That layout reads as an error — it is the same composition as a 404 — and it puts the least useful element, a generic icon, at the optical centre.

Here the icon is a small mark on the same baseline as the title, the copy is left-aligned like every other paragraph in the product, and a rule runs down the side so the block sits in the layout instead of floating in a hole.

Usage

import { Empty } from "@heyo-sh/heyo-ui";<Empty  icon={IconInbox}  title="No notifications"  description="You are all caught up."/>;

Centred, when centring is right

align="center" exists for the one case that earns it: an entire empty page, with nothing else on screen to align to.

<Emptyalign="center"borderedicon={IconMoodEmpty}title="Nothing to see here"description="This project has no deployments."action={<Button variant="outline">Read the guide</Button>}/>

Bordered

bordered draws a well around the block — for an empty pane or a drop target, where the boundary is part of the message.

<Emptyborderedicon={IconInbox}title="No incidents"description="Nothing has paged anyone in 42 days."/>

Properties