---
title: SectionMessage
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/feedback/SectionMessage
---

## SectionMessage

Use a Section Message to inform of the status of a section or a group of items.

Section Messages can't be dismissed by the user. Remove them once the situation has been resolved or the user has taken the appropriate action.

### Usage

```jsx
import { SectionMessage } from 'nr1'
```

### Examples

#### Types

```jsx
<Stack
  directionType={Stack.DIRECTION_TYPE.VERTICAL}
  horizontalType={Stack.HORIZONTAL_TYPE.FILL}
>
  <StackItem>
    <SectionMessage
      description="Your Metric query has been transformed into a compatible query with the previous Infrastructure metric format."
      actions={[{ label: "See our docs", to: "https://support.newrelic.com/" }]}
    />
  </StackItem>
  <StackItem>
    <SectionMessage
      type={SectionMessage.TYPE.SUCCESS}
      title="File has been uploaded"
      description="We are unable to save any progress at this time."
      actions={[
        { label: "Primary action", onClick: console.log },
        { label: "Secondary action", onClick: console.log },
      ]}
    />
  </StackItem>
  <StackItem>
    <SectionMessage
      type={SectionMessage.TYPE.WARNING}
      title="Cannot connect to the database"
      description="We are unable to save any progress at this time."
      actions={[
        { label: "Primary action", onClick: console.log },
        { label: "Secondary action", onClick: console.log },
      ]}
    />
  </StackItem>
  <StackItem>
    <SectionMessage
      type={SectionMessage.TYPE.CRITICAL}
      title="Error on the request"
      description="We tried to transform your query into a query that is compatible with both new Metric and previous Infrastructure metric formats, but the transformation process failed."
      actions={[
        { label: "Contact support", to: "https://support.newrelic.com/" },
      ]}
    />
  </StackItem>
</Stack>
```

### Props

| `actions` shape\[]   | You may use up to two actions to help the user navigate to another view, trigger background events, or change the nerdlet/section behavior. shape `ariaLabel` string `label` REQUIREDstring `onClick` function Callback fired any time the user clicks on the button. `to` shape\|string Location object or url string to link to. shape `pathname` REQUIREDstring `search` string `hash` string                                                                                                      |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string   | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                                                                                        |
| `description` string | Use it to provide further details and explain, if any, the steps for the user to take. Note: `title` and `description` props are optional, but at least one of them has to be provided.                                                                                                                                                                                                                                                                                                               |
| `style` object       | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                                                                                             |
| `testId` string      | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                                                                                                                                   |
| `title` string       | Use it to provide the main message.Note: `title` and `description` props are optional, but at least one of them has to be provided.                                                                                                                                                                                                                                                                                                                                                                   |
| `type` enum          | Type can be: - Info (default) - Use it to indicate that an something is new, that an item has just been created, or to provide help. - Success - Use it to communicate positive changes or conditions. - Warning - Use it to communicate a possible problem, undesired situation, cautionary advice, or advanced notice of some sort. - Critical - Use it to communicate a problem. SectionMessage.TYPE.CRITICAL, SectionMessage.TYPE.INFO, SectionMessage.TYPE.SUCCESS, SectionMessage.TYPE.WARNING, |