Icon Message

Icon Message is a component that can be used to show a message with an icon in the center of the page.

Props

Name
Default
Description
icon
null
The icon to show.
message
null
The message to show.
iconColor
null
The color of the icon.
iconSize
100
The size of the icon.
padding
0
The padding of the icon message container.
empty
false
Whether to show the empty template.
error
false
Whether to show the error template.

Usage

Set icon and message as you prefer.

<IconMessage 
    icon={IconSearch} 
    message="Nothing to search here" 
    iconColor="var(--accent-dark)" 
    padding={20} 
    iconSize={50} >
</IconMessage>
Nothing to search here

Templates

Icon Message has two templates: empty and error. You can use them by setting empty or error prop to true.

Error

<IconMessage error />
Something went wrong

Empty

<IconMessage empty />
No results found

Using Slots

<IconMessage iconColor="var(--green)">
    <div slot="message">
        There are no results to show.
    </div>
    <IconInbox slot="icon" size={100} />    
</IconMessage>
Start Writing Something