import React from 'react'; import { Empty } from '@douyinfe/semi-ui'; import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations'; () => ( <Empty image={<IllustrationConstruction style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />} title={'Function under construction'} description="The current function is not yet open, so stay tuned." /> );

import React from 'react'; import { Empty, Button } from '@douyinfe/semi-ui'; import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations'; () => ( <Empty image={<IllustrationNoContent style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />} title="Empty status header" description="Start creating your first dashboard!" > <div> <Button style={{ padding: '6px 24px', marginRight: 12 }} type="primary"> Secondary button </Button> <Button style={{ padding: '6px 24px' }} theme="solid" type="primary"> Level 1 button </Button> </div> </Empty> );

import React from 'react'; import { Empty, Typography } from '@douyinfe/semi-ui'; () => ( <Empty title="No matching filter results found yet" description={ <span> <Typography.Text>Try</Typography.Text> <Typography.Text link>Reset filter</Typography.Text> </span> } /> );

import React from 'react'; import { Empty, Button } from '@douyinfe/semi-ui'; import { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-illustrations'; () => ( <Empty title={'Created successfully'} image={<IllustrationSuccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />} layout="horizontal" description="This is a very long description text. This layout is recommended when the text is too long. This is a very long description text. This layout is recommended when the text is too long. This is a very long description text. This layout is recommended when the text is too long." style={{ width: 800, margin: '0 auto' }} > <Button type="primary" theme="solid" style={{ padding: '6px 24px' }}> Start operation </Button> </Empty> );

import React from 'react'; import { Empty } from '@douyinfe/semi-ui'; import { IllustrationConstruction, IllustrationSuccess, IllustrationFailure, IllustrationNoAccess, IllustrationNoContent, IllustrationNotFound, IllustrationNoResult } from '@douyinfe/semi-illustrations'; /* The following is available after version 1.13.0 */ import { IllustrationIdle, IllustrationIdleDark, IllustrationConstructionDark, IllustrationSuccessDark, IllustrationFailureDark, IllustrationNoAccessDark, IllustrationNoContentDark, IllustrationNotFoundDark, IllustrationNoResultDark } from '@douyinfe/semi-illustrations'; () => { const emptyStyle = { padding: 30, }; return ( <div style={{ display: 'flex', flexWrap: 'wrap' }}> <Empty image={<IllustrationSuccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />} description={'Created successfully'} style={emptyStyle} /> <Empty image={<IllustrationFailure style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationFailureDark style={{ width: 150, height: 150 }} />} description={'Failed to load'} style={emptyStyle} /> <Empty image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />} description={'Permission denied'} style={emptyStyle} /> <Empty image={<IllustrationNoContent style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />} description={'No content, please add'} style={emptyStyle} /> <Empty image={<IllustrationNotFound style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNotFoundDark style={{ width: 150, height: 150 }} />} description={'Page 404'} style={emptyStyle} /> <Empty image={<IllustrationNoResult style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />} description={'No search results'} style={emptyStyle} /> <Empty image={<IllustrationConstruction style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />} description={'under construction'} style={emptyStyle} /> <Empty image={<IllustrationIdle style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationIdleDark style={{ width: 150, height: 150 }} />} description={'Wandering Quartet'} style={emptyStyle} /> </div> ); };