Empty
The placeholder for a view without content.
No blog posts yet
Posts you write in the journal show up here.
import {
Button,
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
Icon
} from 'alinea/components'
import {IcRoundAdd, LucideFile} from 'alinea/dashboard/icons'
export function EmptyExample() {
return (
<Empty variant="card" aria-label="No blog posts">
<EmptyHeader>
<EmptyMedia variant="icon">
<Icon icon={LucideFile} />
</EmptyMedia>
<EmptyTitle>No blog posts yet</EmptyTitle>
<EmptyDescription>
Posts you write in the journal show up here.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button color="primary" icon={IcRoundAdd}>
New post
</Button>
</EmptyContent>
</Empty>
)
}Props
<Empty>
A placeholder for a view without content: an EmptyHeader with media, title and description, followed by optional EmptyContent with actions.
PropTypeDefaultDescription
variant'default' | 'card'Default 'default'
card renders the empty state on a raised surfaceAlso accepts className and style, id and aria-* labelling attributes and data-* attributes.
<EmptyHeader>
PropTypeDefaultDescription
children*ReactNodeDefault –
Also accepts className and style and data-* attributes.
<EmptyMedia>
An icon or illustration above the title
PropTypeDefaultDescription
variant'default' | 'icon'Default 'default'
icon places the icon on a muted tileAlso accepts className and style and data-* attributes.
<EmptyTitle>
PropTypeDefaultDescription
idstringDefault –
as'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'Default 'div'The element to render, use a heading when the empty state is the page
Also accepts className and style and data-* attributes.
<EmptyDescription>
PropTypeDefaultDescription
idstringDefault –
Also accepts className and style and data-* attributes.
<EmptyContent>
Actions or further content below the header
PropTypeDefaultDescription
children*ReactNodeDefault –
Also accepts className and style and data-* attributes.