Placeholder Component
Empty state indicator for tables, lists, and sections with no data.
Default (title only)
Simplest empty state — default search icon is rendered
razor
@* Default search icon is rendered automatically *@
<Placeholder Title="No patients found" />With description
Title + supporting paragraph
razor
<Placeholder Title="No data for the selected month"
Description="Come back later" />Hide icon
HideIcon="true" suppresses the featured icon
razor
<Placeholder Title="Nothing here"
Description="Use HideIcon when the surrounding layout already provides context."
HideIcon="true" />With featured icon
Icon slot for a contextual glyph
razor
<Placeholder Title="No data for the selected month"
Description="Come back later">
<Icon>
<svg viewBox="0 0 24 24">...info icon...</svg>
</Icon>
</Placeholder>With actions
Full empty state pattern
razor
<Placeholder Title="No patients found"
Description="There are no patients matching your current filters.">
<Icon>
<svg>...users icon...</svg>
</Icon>
<Actions>
<Button Variant="secondary" Size="sm" Text="Clear Filters" />
<Button Variant="primary" Size="sm" Text="Add Patient" />
</Actions>
</Placeholder>Bordered variant
Self-bordered — no outer frame needed
No files uploaded
Drag and drop files here, or click the button below to browse.
razor
<Placeholder Title="No files uploaded"
Description="Drag and drop files here, or click the button below to browse."
Bordered="true">
<Icon>
<svg>...upload icon...</svg>
</Icon>
<Actions>
<Button Variant="primary" Size="sm" Text="Upload Files" />
</Actions>
</Placeholder>