Icon Message is a component that can be used to show a message with an icon in the center of the page.
icon
null
message
null
iconColor
null
iconSize
100
padding
0
empty
false
error
false
Set icon and message as you prefer.
<IconMessage
icon={IconSearch}
message="Nothing to search here"
iconColor="var(--accent-dark)"
padding={20}
iconSize={50} >
</IconMessage>
Icon Message has two templates: empty
and error
.
You can use them by setting empty
or error
prop to true
.
<IconMessage error />
<IconMessage empty />
<IconMessage iconColor="var(--green)">
<div slot="message">
There are no results to show.
</div>
<IconInbox slot="icon" size={100} />
</IconMessage>