Ui.IllustratedMessage

A component to display an illustrated message with slots for an image, title, subtitle and actions.

Usually it's used to display a message with a call to action in lists where there are no items.

Interactive Demo

You can play around with a Ui.IllustratedMessage below using the controls.

Hearth!
Give a little love!
Title
Subtitle
Give a little love!
Size (16px)
<Ui.IllustratedMessage
subtitle=<{ "Give a little love!" }>
size={Ui.Size.Px(16)}
title=<{ "Hearth!" }>
image={<Ui.Image
src={@asset(../../assets/images/app-weight-tracker.jpg)}
height={Ui.Size.Em(7)}
width={Ui.Size.Em(10)}
/>}
actions=<>
<Ui.Button iconBefore={Ui.Icons.HEART} label="Give Love!" type="danger"/>
<Ui.Button
iconBefore={Ui.Icons.HEART_OUTLINE}
label="More love!"
type="secondary"
/>
</>/>
Size

The size of the component can be set with the size property.

Title
Subtitle
Title
Subtitle
Title
Subtitle
<>
<Ui.IllustratedMessage
image={<Ui.Icon size={Ui.Size.Em(6)} icon={Ui.Icons.BUG}/>}
actions=<><Ui.Button label="Action"/></>
subtitle=<>"Subtitle"</>
size={Ui.Size.Px(12)}
title=<>"Title"</>
/>
<Ui.IllustratedMessage
image={<Ui.Icon size={Ui.Size.Em(6)} icon={Ui.Icons.BUG}/>}
actions=<><Ui.Button label="Action"/></>
subtitle=<>"Subtitle"</>
size={Ui.Size.Px(16)}
title=<>"Title"</>
/>
<Ui.IllustratedMessage
image={<Ui.Icon size={Ui.Size.Em(6)} icon={Ui.Icons.BUG}/>}
actions=<><Ui.Button label="Action"/></>
subtitle=<>"Subtitle"</>
size={Ui.Size.Px(20)}
title=<>"Title"</>
/>
</>
Image

The image displayed can be set with the image property.

Title
Title
Title
<>
<Ui.IllustratedMessage
image={<Ui.Icon icon={Ui.Icons.BUG}/>}
title=<>"Title"</>
/>
<Ui.IllustratedMessage
title=<>"Title"</>
image={
<Ui.Image
src={@asset(../../assets/images/app-contacts.jpg)}
height={Ui.Size.Px(150)}
width={Ui.Size.Px(200)}
/>
}
/>
<Ui.IllustratedMessage
image={<Ui.Button label="I am a button!"/>}
title=<>"Title"</>
/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.