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
size
medium
Preset sizes for the icon and padding. small, medium, large.
icon
null
The icon to show.
message
null
The message to show.
iconColor
null
The color of the icon.
iconSize
null
The size of the icon.
padding
null
The padding of the icon message container.
empty
false
Whether to show the empty template.
error
false
Whether to show the error template.
cta
null

Usage

Sizes

Choose type:
<IconMessage empty size="small" />
<IconMessage empty size="medium" />
<IconMessage empty size="large" />
No results found

No results found

No results found

Custom Icon and Message

You can use custom icons and messages with Icon Message, as well as custom padding, colors, and sizes.

<IconMessage 
    icon={IconSearch} 
    iconColor="var(--accent-dark)" 
    padding={20} 
    iconSize={50}
>
    Nothing to search here
</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>
        There are no results to show.
    </div>
    <IconInbox slot="icon" size={60} />    
</IconMessage>
Start Writing Something

Call to Action

You can add a call to action button using the cta prop.

<IconMessage
    error
    cta={{
        text: "Try again",
        onClick: (e) => {
            toast.info("Trying again...");
        },
        props: { color: "red" },
    }}
/>
Failed to load updates.

For custom UIs, you can use the cta slot.