Last updated Nov 23, 2022

This section describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

SectionMessage

To add the SectionMessage component to your app:

1
2
import { SectionMessage } from '@forge/react';

Description

A text callout to alert users to important information.

Props

Name	Type	Required	Description
`children`	`Array<Text>`	Yes	The content of the section message.
`title`	`string`		The title of the section message.
`appearance`	`"info" \| "warning" \| "error" \| "confirmation" \| "change"`		Shows an icon next to the title and changes the appearance of the section message. If appearance is not specified, the default appearance is `"info"`.

Examples

Appearance property

By default, all section message come with an icon and an area for content.

Info

An info (information) section message is used to signify a change in state or important information. This is the default appearance for section messages.

Example image of rendered section info message

1
2
<SectionMessage title="Title" appearance="info">
  <Text>The content of the section message</Text>
</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

Example image of rendered section warning message

1
2
<SectionMessage title="Title" appearance="warning">
  <Text>The content of the section message</Text>
</SectionMessage>

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

Example image of rendered section error message

1
2
<SectionMessage title="Title" appearance="error">
  <Text> The content of the section message </Text>
</SectionMessage>

Confirmation

Use a confirmation section message to let the user know that an action or event has happened successfully.

Example image of rendered section confirmation message

1
2
<SectionMessage title="Title" appearance="confirmation">
  <Text>The content of the section message</Text>
</SectionMessage>

Change

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

Example image of rendered section change message

1
2
<SectionMessage title="Title" appearance="change">
  <Text>The content of the section message</Text>
</SectionMessage>