Empty state
Empty state
Component demo
Interactive example
<ic-empty-stateheading="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>
<IcEmptyStateheading="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
.
|
|
|
---|---|---|
|
The alignment of the empty state container. |
|
|
The body text rendered in the empty state container. |
|
|
The number of lines of body text to display before truncating. |
|
|
The title rendered in the empty state container. |
|
|
The size of the image or icon used in the image slot. |
|
|
The subtitle rendered in the empty state container. |
|
The alignment of the empty state container. |
The body text rendered in the empty state container. |
The number of lines of body text to display before truncating. |
The title rendered in the empty state container. |
The size of the image or icon used in the image slot. |
The subtitle rendered in the empty state container. |
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.
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Variants
Actions slot
Interactive example
<ic-empty-stateheading="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>
<IcEmptyStateheading="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
<ic-empty-stateheading="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."><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-empty-state>
<IcEmptyStateheading="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."><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></IcEmptyState>
Image size
Interactive example
<ic-empty-stateimage-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."><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-empty-state>
<IcEmptyStateimageSize="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."><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></IcEmptyState>
Icon in the image slot
Interactive example
<ic-empty-stateheading="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."><svgslot="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>
<IcEmptyStateheading="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."><SlottedSVGslot="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
<ic-empty-statealigned="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>
<IcEmptyStatealigned="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
<ic-empty-statealigned="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>
<IcEmptyStatealigned="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
<ic-empty-statebody-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>
<IcEmptyStatebodyMaxLines="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."/>