Empty state

Skip to page content

BETA

Component demo

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those.

Customer support

Web component

React

<ic-empty-state
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those."
>
<svgslot="image"viewBox="0 0 1600 1600">
<rectfill="#ff7700"width="1600"height="1600"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</svg>
<ic-buttonslot="actions">Go to favourite coffees</ic-button>
<ic-linkslot="actions"href="/">
    Customer support
</ic-link>
</ic-empty-state>

<IcEmptyState
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those."
>
<SlottedSVGslot="image"viewBox="0 0 1600 1600">
<rectfill="#ff7700"width="1600"height="1600"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</SlottedSVG>
<IcButtonslot="actions">Go to favourite coffees</IcButton>
<IcLinkslot="actions"href="/">
    Customer support
</IcLink>
</IcEmptyState>

Empty state details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property aligned Attribute aligned	The alignment of the empty state container. type: IcEmptyStateAlignment - "center" \| "left" \| "right"	"left"
Property body Attribute body	The body text rendered in the empty state container. type: string
Property bodyMaxLines Attribute body-max-lines	The number of lines of body text to display before truncating. type: number
Property heading Attribute heading	The title rendered in the empty state container. type: string
Property imageSize Attribute image-size	The size of the image or icon used in the image slot. type: IcSizes - "default" \| "large" \| "small"	"default"
Property subheading Attribute subheading	The subtitle rendered in the empty state container. type: string

Property

aligned

Attribute

aligned

The alignment of the empty state container.

type: IcEmptyStateAlignment - "center" | "left" | "right"

Default: "left"

Property

body

Attribute

body

The body text rendered in the empty state container.

type: string

Property

bodyMaxLines

Attribute

body-max-lines

The number of lines of body text to display before truncating.

type: number

Property

heading

Attribute

heading

The title rendered in the empty state container.

type: string

Property

imageSize

Attribute

image-size

The size of the image or icon used in the image slot.

type: IcSizes - "default" | "large" | "small"

Default: "default"

Property

subheading

Attribute

subheading

The subtitle rendered in the empty state container.

type: string

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot actions	Content is placed at the bottom below all other content.
Slot body	Content will be rendered in place of the body prop.
Slot heading	Content will be rendered in place of the heading prop.
Slot image	Content is placed at the top above all other content.
Slot subheading	Content will be rendered in place of the subheading prop.

Variants

Actions slot

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those, or try again.

Customer support

Web component

React

<ic-empty-state
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
>
<ic-buttonslot="actions">Go to favourite coffees</ic-button>
<ic-linkslot="actions"href="/">Customer support</ic-link>
</ic-empty-state>

<IcEmptyState
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
>
<IcButtonslot="actions">Go to favourite coffees</IcButton>
<IcLinkslot="actions"href="/">Customer support</IcLink>
</IcEmptyState>

Image slot

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those, or try again.

Web component

React

<ic-empty-state
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
>
<svg
slot="image"
viewBox="0 0 1600 1600"
>
<rectfill="#ff7700"width="1600"height="1600"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</svg>
</ic-empty-state>

<IcEmptyState
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
>
<SlottedSVG
slot="image"
viewBox="0 0 1600 1600"
>
<rectfill="#ff7700"width="1600"height="1600"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</SlottedSVG>
</IcEmptyState>

Image size

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those, or try again.

Web component

React

<ic-empty-state
image-size="large"
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
>
<svg
slot="image"
viewBox="0 0 1600 1600"
>
<rectfill="#ff7700"width="1600"height="1600"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</svg>
</ic-empty-state>

<IcEmptyState
imageSize="large"
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
>
<SlottedSVG
slot="image"
viewBox="0 0 1600 1600"
>
<rectfill="#ff7700"width="1600"height="1600"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</SlottedSVG>
</IcEmptyState>

Icon in the image slot

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those, or try again.

Web component

React

<ic-empty-state
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#D07932"
>
<titleid="warning-title">Warning</title>
<pathd="M0 0h24v24H0z"fill="none"/>
<pathd="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
</svg>
</ic-empty-state>

<IcEmptyState
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
>
<SlottedSVG
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#D07932"
>
<titleid="warning-title">Warning</title>
<pathd="M0 0h24v24H0z"fill="none"/>
<pathd="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
</SlottedSVG>
</IcEmptyState>

Right aligned

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those, or try again.

Web component

React

<ic-empty-state
aligned="right"
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
></ic-empty-state>

<IcEmptyState
aligned="right"
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
/>

Center aligned

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those, or try again.

Web component

React

<ic-empty-state
aligned="center"
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
></ic-empty-state>

<IcEmptyState
aligned="center"
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those, or try again."
/>

Max lines

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.

Web component

React

<ic-empty-state
body-max-lines="1"
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you."
></ic-empty-state>

<IcEmptyState
bodyMaxLines="1"
heading="Hmm...there's nothing here"
subheading="We don't currently have any favourite teas, probably because coffee is much better."
body="Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you."
/>

Last reviewed 31 May 2024 .