Layout

Blank Slate

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

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

NameTypeDefaultDescription
additionalSectionReactNode
Additionnal child to add to the blank slate
buttonClassesstring[]
Additional css classes the buttons should have
buttonsIBaseActionOptions[]
Array of buttons to add to the blank slate
childrenReactNode
classesstring[]
Additional css classes that the blank slate should have
containerClassesstring[]
Additional css classes the container should have
descriptionReactNode
Description template to add to the blank slate
descriptionClassNamestring
Additional css classes the description should have
iconIcon
An icon to display above the title
titleReactNode
Title of the blank slate
withModalbooleanfalse
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
FirstnameLastnameAge

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
FirstnameLastnameAge

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