Empty State

An Empty State is used when no data is available for display.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example


                                                        
                                                        
                                                            import { EmptyState } from '@optimus-web/core';
                                                        
                                                        <EmptyState
                                                            primaryText="No open bills"
                                                            secondaryText="All bills are closed or you haven't created one yet."
                                                            action={
                                                                <Link onClick={addBill}>
                                                                    Create new bill
                                                                </Link>
                                                            }
                                                            pictogram="folder"
                                                        />
                                                        
                                                            

API

Name

Description

Type

Default

primaryText

Main message

React.ReactNode

-

secondaryText?

Secondary message

React.ReactNode

-

action?

Action component, like a link or a button, offering an alternative to the user

React.ReactNode

-

maxWidth?

Set the max-width CSS property for the component container

string

100%

pictogram?

Defines the pictogram

PictogramName

search