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

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            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