Section message
A section message is used to alert users to a particular section of the screen.
Appearance
By default, all section message come with an icon and an area for content. A title and actions can also be added.
Information
The information section message is the default appearance used to signify a change in state or important information.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import SectionMessage, { SectionMessageAction } from '@neoKit/section-message';
const DefaultSectionMessageExample = () => {
return (
<SectionMessage
title='Editing is restricted'
actions={[
<SectionMessageAction onClick={()=>{}}>Action 1</SectionMessageAction>,
<SectionMessageAction href='m.youtube.com'>Action 2</SectionMessageAction>
]}
>
<p>
You're not allowed to change these restrictions. It's either due
to the restrictions on the page, or permission settings for this
space.
</p>
</SectionMessage>
);
};
export default DefaultSectionMessageExample;
Success
Use a success section message to let the user know that an action or event has happened successfully. Not a common use case for section messages.
File has been uploaded.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import SectionMessage, { SectionMessageAction } from '@neoKit/section-message';
const SuccessSectionMessageExample = () => {
return (
<SectionMessage
title=''
appearance="success"
>
<p>
File has been uploaded.
</p>
</SectionMessage>
);
};
export default SuccessSectionMessageExample;
Warning
Use a warning section message to help users:
- avoid errors
- manage authentication issues
- take the actions needed to avoid potentially dangerous actions
- feel certain they're making the decision, for example, in confirmation modals
These are the most common use cases for section messages.
We are unable to save any progress at this time.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import SectionMessage, { SectionMessageAction } from '@neoKit/section-message';
const WarningSectionMessageExample = () => {
return (
<SectionMessage
title='Cannot connect to the database'
appearance='warning'
>
<p>We are unable to save any progress at this time.</p>
</SectionMessage>
);
};
export default WarningSectionMessageExample;
Error
Use an error section message to let the user know when:
- something destructive or critical has happened
- access has been denied
- there are connectivity issues
Not a common use case for section messages.
The user `user15` no longer has access to Atlassian services.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import SectionMessage, { SectionMessageAction } from '@neoKit/section-message';
const ErrorSectionMessageExample = () => {
return (
<SectionMessage
title='This account will be permanently deleted'
appearance='error'
>
<p>The user 'user15' no longer has access to Atlassian services.</p>
</SectionMessage>
);
};
export default ErrorSectionMessageExample;
Discovery
Use a discovery section message to signify an update to the UI or provide information around new features and onboarding.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import SectionMessage, { SectionMessageAction } from '@neoKit/section-message';
const DiscoverSectionMessageExample = () => {
return (
<SectionMessage
title='Your managed accounts now include Trello access'
appearance='discovery'
actions={<SectionMessageAction href="#">Learn more</SectionMessageAction>}
>
<p>
Your managed accounts now include Trello access Some users haven't
started using their Atlassian account for Trello. Changes you make
to an account are reflected only if the user starts using the
account for Trello.
</p>
</SectionMessage>
);
};
export default DiscoverSectionMessageExample;
Actions
Use the actions prop to let users act on the content in the section message. The SectionMessageAction component is designed to work with the actions prop. In most cases you should use the section message action, but you can also use any JSX element in the actions array. An action will render a button if you supply an onClick handler, or a link if you supply an href. You can override the default link component using the linkComponent prop; this works well with router libraries.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import SectionMessage, { SectionMessageAction } from '@neoKit/section-message';
const ActionSectionMessageExample = () => {
return (
<SectionMessage
title='Merged pull request'
appearance='success'
actions={[
<SectionMessageAction href='#'>View commit</SectionMessageAction>,
<SectionMessageAction onClick={() => {}}>
Dismiss
</SectionMessageAction>
]}
>
<p>Pull request #10146 merged after a successful build</p>
</SectionMessage>
);
};
export default ActionSectionMessageExample;