Empty

@sushindustries/ui

Nothing, said properly: what is missing, why that is fine, and what to do next - in that order, quietly.

4 min read
View as MarkdownEdit on GitHub

Install commands are on Home, attached from the registry - they are not written here, because a second copy is a copy that goes stale. This tab starts after the install worked.

Use it

import { Button, Empty } from "@sushindustries/ui";

export function Example() {
	return (
		<Empty
			title="No posts yet"
			icon="note"
			action={<Button variant="ghost">Write one</Button>}
		>
			Drafts stay off the index until they say otherwise.
		</Empty>
	);
}
tsx

What you should see

A quiet block, centred: an icon, the title in bold, one line of explanation under it, and the action last. Nothing here does anything on its own - action is whatever you pass, this component only places it.

If nothing happens

EmptyEmptyNothing, said properly: what is missing, why that is fine, and what to do next - in that order, quietly.@sushindustries/ui · content always renders something, including with no children and no action - iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content defaults to folder-open rather than disappearing, since a bare title with no glyph reads as a failed render rather than an intentional empty state.

UsesIconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content
Mentioned inData Table