Zero data
Use zero data to communicate that there's no relevant data or results to display.
Examples
This is the primary text
This secondary text contains a link to somewhere else. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Usage
Zero data offers a standard layout to show that there's no relevant data. It should dominate whatever container it's placed in to make it unambiguous.
Attach actions to the zero data as necessary. If there's currently no data, but the user could create some to get started, consider using the action to let them create data.
APIs
ZeroDataActionType
ctaButton0
number
link2
number
IZeroDataItem
actionButtonPropsoptional
any
Additional props to pass to the button
actionHrefoptional
string
href used for link when actionType is link
actionTextoptional
string
Text to put on the button. If not set, no button will be rendered.
imageAltText
string
Alt text to set for the image
imagePathoptional
string
Path to the image to display.
onActionClickoptional
(ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IZeroDataItem) => void
Callback called when the user clicks on the button
primaryTextoptional
string
Primary text to display
renderActionoptional
() => JSX.Element
A function to render an action other than the standard button or link.
If specified, actionText, actionType, onActionClick, and actionHref will be ignored.
secondaryTextoptional
string | JSX.Element
Secondary text to display
IZeroDataProps
actionButtonPropsInherited From: IZeroDataItem
any
Additional props to pass to the button
actionHrefInherited From: IZeroDataItem
string
href used for link when actionType is link
actionTextInherited From: IZeroDataItem
string
Text to put on the button. If not set, no button will be rendered.
actionTypeInherited From: IZeroDataItem
The type of button to render. Default is link.
className
string
Class name for the root component
iconPropsInherited From: IZeroDataItem
Props to pass to the icon to render in place of an image
imageAltTextrequiredInherited From: IZeroDataItem
string
Alt text to set for the image
imagePathInherited From: IZeroDataItem
string
Path to the image to display.
onActionClickInherited From: IZeroDataItem
(ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IZeroDataItem) => void
Callback called when the user clicks on the button
primaryTextInherited From: IZeroDataItem
string
Primary text to display
renderActionInherited From: IZeroDataItem
() => JSX.Element
A function to render an action other than the standard button or link.
If specified, actionText, actionType, onActionClick, and actionHref will be ignored.
secondaryTextInherited From: IZeroDataItem
string | JSX.Element
Secondary text to display
IZeroDataMultipleProps
className
string
Class name for the root component