You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Blank Slate

A blank slate informs users that a section doesn’t contain any data and provides a way to address it.

View source

Title of the blank slate

This is a description with a link to this website

1
import {BlankSlate} from '@coveord/plasma-react';
2
import {IdeaSize32Px} from '@coveord/plasma-react-icons';
3

4
export default () => (
5
    <BlankSlate
6
        icon={IdeaSize32Px}
7
        title="Title of the blank slate"
8
        description={
9
            <span>
10
                This is a description with a link to{' '}
11
                <a target="_blank" href="http://www.perdu.com/" className="link">
12
                    this website
13
                </a>
14
            </span>
15
        }
16
        buttons={[
17
            {
18
                name: 'button',
19
                primary: true,
20
                enabled: true,
21
            },
22
        ]}
23
    />
24
);

Props

Name	Type	Default	Description
`additionalSection`	`ReactNode`		Additionnal child to add to the blank slate
`buttonClasses`	`string[]`		Additional css classes the buttons should have
`buttons`	`IBaseActionOptions[]`		Array of buttons to add to the blank slate
`children`	`ReactNode`
`classes`	`string[]`		Additional css classes that the blank slate should have
`containerClasses`	`string[]`		Additional css classes the container should have
`description`	`ReactNode`		Description template to add to the blank slate
`descriptionClassName`	`string`		Additional css classes the description should have
`icon`	`Icon`		An icon to display above the title
`title`	`ReactNode`		Title of the blank slate
`withModal`	`boolean`	`false`	Whether the blank slate should have the css style to fit a modal

Examples

With error

Unable to retrieve X

Super clear error message localized to ensure a good comprehension about the current error

1
import {BlankSlateWithError} from '@coveord/plasma-react';
2

3
export default () => (
4
    <BlankSlateWithError
5
        title="Unable to retrieve X"
6
        description="Super clear error message localized to ensure a good comprehension about the current error"
7
    />
8
);

With table

Firstname	Lastname	Age
Title test description test

1
import {BlankSlateWithTable} from '@coveord/plasma-react';
2
import {IdeaSize32Px} from '@coveord/plasma-react-icons';
3

4
export default () => (
5
    <table className="table">
6
        <thead>
7
            <tr>
8
                <th>Firstname</th>
9
                <th>Lastname</th>
10
                <th>Age</th>
11
            </tr>
12
        </thead>
13
        <tbody>
14
            <BlankSlateWithTable title="Title test" description="description test" icon={IdeaSize32Px} />
15
        </tbody>
16
    </table>
17
);

Table in error

Firstname	Lastname	Age
Unable to retrieve X Super clear error message localized to ensure a good comprehension about the current error Auto refresh in 10 seconds

1
import {BlankSlateWithTableInError, ButtonWithRefreshCallback} from '@coveord/plasma-react';
2

3
export default () => (
4
    <table className="table">
5
        <thead>
6
            <tr>
7
                <th>Firstname</th>
8
                <th>Lastname</th>
9
                <th>Age</th>
10
            </tr>
11
        </thead>
12
        <tbody>
13
            <BlankSlateWithTableInError
14
                title="Unable to retrieve X"
15
                description="Super clear error message localized to ensure a good comprehension about the current error"
16
                additionalSection={
17
                    <ButtonWithRefreshCallback
18
                        id="refresh"
19
                        delay={10}
20
                        callback={(start) => setTimeout(start, 2000)}
21
                        renderCount={(count: number) => (
22
                            <span className="small-text">Auto refresh in {count} seconds</span>
23
                        )}
24
                        button={{
25
                            name: 'Refresh',
26
                            enabled: true,
27
                        }}
28
                        buttonContainerProps={{
29
                            className: 'mb2',
30
                        }}
31
                    />
32
                }
33
            />
34
        </tbody>
35
    </table>
36
);

No guidelines exist for BlankSlate yet.

Create guidelines