Empty State

A web component for centered placeholder messages with an optional icon, where there is no content yet.

A placeholder that says why a view has nothing to show, with an icon above the message.

Installation

npm install @3mo/empty-state

import '@3mo/empty-state'

Usage

<mo-empty-state icon='youtube_searched_for' style='height: 400px'>No results</mo-empty-state>

Examples

• Icons — The icon says what is missing; the message and the icon center in whatever space the element is given.
• Without Icon — Without icon, only the message shows.
• Actions — An action in the slot lets the reader fill the view.

API

mo-empty-state

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | icon | icon | MaterialIcon \| undefined | | The Material icon shown above the message. |

Slots

| Name | Description | | --- | --- | | (default) | The message, and any action that fills the view. |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH