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.

Default

Use default lozenges for a general status or state, such as: to do, unavailable, minor, not started.

Default lozenge

import SectionMessage from '@/components/section-message';

<SectionMessage>
  <p>Default lozenge</p>
</SectionMessage>

Danger

Use an danger section message to let the user know when:

  • something destructive or critical has happened
  • access has been denied
  • there are connectivity issues

This account will be permanently deleted

The user `user15` no longer has access to Atlassian services.

import SectionMessage from '@/components/section-message';

<SectionMessage appearance="danger" title="This account will be permanently deleted">
  <p>The user `user15` no longer has access to Atlassian services.</p>
</SectionMessage>

Help

Use a discovery section message to signify an update to the UI or provide information around new features and onboarding.

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.

import SectionMessage from '@/components/section-message';

<SectionMessage appearance="help" title="Your managed accounts now include Trello access">
  <p>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>

Info

The information section message is the default appearance used to signify a change in state or important information.

Editing is restricted

You're not allowed to change these restrictions. It's either due to the restrictions on the page, or permission settings for this space.

import SectionMessage from '@/components/section-message';

<SectionMessage appearance="info" title="Editing is restricted">
  <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>

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.

Success

File has been uploaded.

import SectionMessage from '@/components/section-message';

<SectionMessage appearance="success" title="Success">
  <p>File has been uploaded.</p>
</SectionMessage>

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.

Cannot connect to the database

We are unable to save any progress at this time.

import SectionMessage from '@/components/section-message';

<SectionMessage appearance="warning" title="Cannot connect to the database">
  <p>We are unable to save any progress at this time.</p>
</SectionMessage>