Empty state - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Go to favourite coffees

Customer support

Web component

React

Show full code

<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" \| undefined	"left"
Property body Attribute body	The body text rendered in the empty state container. type: string - string \| undefined
Property heading Attribute heading	The title rendered in the empty state container. type: string - string \| undefined
Property imageSize Attribute image-size	The size of the image or icon used in the image slot. type: IcSizes - "large" \| "medium" \| "small" \| undefined	"medium"
Property maxLines Attribute max-lines	The number of lines of body text to display before truncating. type: number - number \| undefined
Property subheading Attribute subheading	The subtitle rendered in the empty state container. type: string - string \| undefined
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"

Property

aligned

Attribute

aligned

The alignment of the empty state container.

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

Default: "left"

Property

body

Attribute

body

The body text rendered in the empty state container.

type: string - string | undefined

Property

heading

Attribute

heading

The title rendered in the empty state container.

type: string - string | undefined

Property

imageSize

Attribute

image-size

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

type: IcSizes - "large" | "medium" | "small" | undefined

Default: "medium"

Property

maxLines

Attribute

max-lines

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

type: number - number | undefined

Property

subheading

Attribute

subheading

The subtitle rendered in the empty state container.

type: string - string | undefined

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

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

Go to favourite coffees

Customer support

Web component

React

Show full code

<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

Web component

React

Show full code

<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

Web component

React

Show full code

<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

Web component

React

Show full code

<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

Web component

React

Show full code

<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

Web component

React

Show full code

<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

Web component

React

Show full code

<ic-empty-state
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
maxLines="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."
/>

Theme

Interactive example

Go to favourite coffees

Customer support

Web component

React

Show full code

<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."
theme="dark"
>
<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"theme="dark">Go to favourite coffees</ic-button>
<ic-linkslot="actions"href="/"theme="dark">
    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."
theme="dark"
>
<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"theme="dark">Go to favourite coffees</IcButton>
<IcLinkslot="actions"href="/"theme="dark">
    Customer support
</IcLink>
</IcEmptyState>

Last reviewed 31 May 2024 .