---
title: 'GlobalStatus'
description: 'The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form.'
version: 11.2.2
generatedAt: 2026-05-11T08:17:54.786Z
checksum: 152019dafedbaceb5839caa0e41d84e2c818240a5300b96b9df66c20fd439274
---

# GlobalStatus

## Import

```tsx
import { GlobalStatus } from '@dnb/eufemia'
```

## Description

The GlobalStatus is a complex component meant for displaying global application notifications or a summary of a form (displaying form errors, messages, etc.).

By default, the `GlobalStatus` is automatically connected together with the [FormStatus](/uilib/components/form-status) component. This means that every form component showing a status will send the status message along to the `GlobalStatus`.

## Relevant links

- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=22127-18578)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/global-status)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/global-status)

### FormStatus default behavior

1. Once a **FormStatus** is shown, the `main` **GlobalStatus** will show up.
1. The page will scroll (if needed) to the dedicated **GlobalStatus**.
1. Form components will send along both the status text and its label to show a good and accessible summary.
1. Screen reader users will automatically hear the entire content of the `GlobalStatus` once it shows up.

### Several GlobalStatus instances

Normally, you only want to have **one** `GlobalStatus` inside your application. But you can have several in parallel. Make sure you give every other one a new ID:


```tsx
render(<GlobalStatus id="other-global-status" />)
```


### Where to put it

- The `GlobalStatus` component should be positioned right under the header. By default, it uses `main` as the ID.
- Or as a secondary summary of errors in a submit form. Keep in mind that, by default, form components like [Input](/uilib/components/input) use the ID `main`. To make sure the built-in [FormStatus](/uilib/components/form-status) sends the message to another `GlobalStatus`, you have to set the [`globalStatus`](/uilib/components/global-status/properties/#configuration-object), like:


```tsx
<GlobalStatus id="other-global-status" />
<Input globalStatus={{
id: 'other-global-status'
}} />
```


But you can also make use of the Eufemia [Provider](/uilib/usage/customisation/provider-info) where you can send the `globalStatus` to the underlying/wrapped components, like:


```tsx
<GlobalStatus id="other-global-status" />
<Provider formElement={{
globalStatus: {
  id: 'other-global-status'
}
}}>
    <Input status="Message" />
  </Provider>
```


### Manual updates

Besides the automated connection between the error states of form components ([FormStatus](/uilib/components/form-status)), you can update messages from anywhere in your application at any time:

**NB:** The GlobalStatus will `autoClose` by default once all messages are removed.

### JavaScript (interceptor situation)

You can access and manipulate an existing GlobalStatus from outside of the React render tree.

1. Given you have already defined a GlobalStatus in JSX:


```tsx
render(<GlobalStatus id="other-global-status" />)
```


2. Then you can control it from within a JavaScript context whenever you need to:


```tsx
// 1. Update / extend the status like so:

const statusOne = GlobalStatus.create({
  id: 'other-global-status',
  // or main
  statusId: 'custom-id-1',
  text: 'New Text',
  item: 'Item from status #1',
  title: 'New Title',
  show: true
});

// 2. and removes "custom-id-1" again if needed
// 2. and removes "custom-id-1" again if needed

statusOne.update({
  text: 'Updated Text'
});

// 3. and removes "custom-id-1" again if needed
// 3. and removes "custom-id-1" again if needed
statusOne.remove();
render(<GlobalStatus id="other-global-status" />);
```


### JSX


```tsx
{/* 1. Place it under the header bar */}
<GlobalStatus text="Optional default text" />
{/* 2. later on, you can show a message */}
<GlobalStatus.Add id="custom-id" statusId="custom-id-1" title="New title" text="First long info text ..." item="Item from status #1" onClose={({
statusId
}) => {
console.log('onClose', statusId);
}} />
{/* 3. and remove it again */}
<GlobalStatus.Remove id="custom-id" statusId="custom-id-1" />
```


If you need an additional `GlobalStatus`, define a custom ID (custom-status):


```tsx
{/* 1. Place it somewhere in your application */}
<GlobalStatus id="custom-status" />
{/* 2. later on, you can show a message */}
<GlobalStatus.Add id="custom-status" statusId="custom-id-1" title="New title" text="First long info text ..." item="Item from status #1" onClose={({
statusId
}) => {
console.log('onClose', statusId);
}} />
{/* 3. and remove it again */}
<GlobalStatus.Remove id="custom-status" statusId="custom-id-1" />
```


## Demos

### GlobalStatus displaying error status

**NB:** Keep in mind, the `items` are handled automatically by all form components! This is just an example of how to define the content manually.


```tsx
render(<GlobalStatus title="Custom Title" text="Failure text" items={[{
  text: 'List item',
  statusAnchorUrl: '/uilib/components/global-status',
  statusAnchorLabel: 'eksempel'
}]} show={true} autoScroll={false} noAnimation={true} omitSetFocus={true} id="demo-1" />)
```


### GlobalStatus displaying info status


```tsx
render(<GlobalStatus state="information" title="Custom info title ..." text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus" items={['Status text 1', 'Status text 2']} show={true} autoScroll={false} noAnimation={true} omitSetFocus={true} id="demo-4" />)
```


### GlobalStatus displaying warning status


```tsx
render(<GlobalStatus state="warning" title="Custom warning title ..." text="A string of text providing a warning or semi-urgent message of some kind to the user" show={true} autoScroll={false} noAnimation={true} omitSetFocus={true} id="demo-5" />)
```


### GlobalStatus displaying success status


```tsx
render(<GlobalStatus state="success" title="Custom success title ..." text="A string of text providing a success message of some kind to the user" show={true} autoScroll={false} noAnimation={true} omitSetFocus={true} id="demo-6" />)
```


### GlobalStatus custom icon


```tsx
render(<GlobalStatus icon={<Icon icon={confetti_medium} />} show={true} autoScroll={false} noAnimation={true} omitSetFocus={true} id="demo-icon" />)
```


### To showcase the automated coupling between **FormStatus** and **GlobalStatus**


```tsx
const InputWithError = () => {
  const [errorMessage, setErrorMessage] = useState(null);
  return <Input label="Input" placeholder="Write less than 5 chars and dismiss the focus to show the GlobalStatus ..." stretch status={errorMessage} onBlur={({
    value
  }) => {
    setErrorMessage(value.length <= 4 ? 'With a message shown' : null);
  }} globalStatus={{
    id: 'main-status'
  }} />;
};
render(<InputWithError />);
```


### GlobalStatus and update routines


```tsx
const Context = createContext(null);
const UpdateDemo = () => {
  const [errorA, setErrorA] = useState(false);
  const [errorB, setErrorB] = useState(false);
  const [isVisible, setVisibility] = useState(false);
  return <Context value={{
    errorA,
    errorB,
    setErrorA,
    setErrorB,
    isVisible,
    setVisibility
  }}>
            <UpdateDemoStatus />
            <UpdateDemoTools />
          </Context>;
};
const UpdateDemoStatus = () => {
  const {
    errorA,
    errorB,
    setErrorA,
    setErrorB
  } = useContext(Context);
  return <>
            <GlobalStatus title="Custom Title" text="Failure text" id="demo-2" />
            <Input top right label="Label A" placeholder="Placeholder A" status={errorA} globalStatus={{
      id: 'demo-2'
    }} onChange={({
      value
    }) => {
      setErrorA(value);
    }} />
            <Input top label="Label B" placeholder="Placeholder B" status={errorB} globalStatus={{
      id: 'demo-2'
    }} onChange={({
      value
    }) => {
      setErrorB(value);
    }} />
          </>;
};
const UpdateDemoTools = () => {
  const {
    errorA,
    errorB,
    setErrorA,
    setErrorB,
    isVisible,
    setVisibility
  } = useContext(Context);

  // Only to demonstrate the usage of an interceptor situation
  const inst = useRef(null);
  useEffect(() => {
    if (!inst.current) {
      inst.current = GlobalStatus.create({
        id: 'demo-2',
        title: 'New Title',
        text: 'New Text',
        statusId: 'custom-item',
        show: false
      });
      inst.current.update({
        onShow: () => {
          console.log('onShow');
          if (!isVisible) {
            setVisibility(true);
          }
        },
        onHide: () => {
          console.log('onHide');
          setVisibility(false);
        },
        onClose: () => {
          console.log('onClose');
          setVisibility(false);
        }
      });
    }
    inst.current.update({
      show: isVisible
    });
  }, [isVisible]);
  useEffect(() => () => inst.current.remove(), []);
  return <Section top innerSpace={{
    block: 'large'
  }} variant="divider">
            <ToggleButton text="Toggle" variant="checkbox" right checked={isVisible} onChange={({
      checked
    }) => {
      setVisibility(checked);
    }} />
            <Button text="Reset" variant="tertiary" icon="reset" disabled={!(errorA || errorB)} onClick={() => {
      setErrorA(null);
      setErrorB(null);
    }} />
          </Section>;
};
render(<UpdateDemo />);
```


### To showcase the custom **Update** and **Remove** possibility


```tsx
function AddRemoveItems() {
  const [count, toggleUpdateStatus] = useState(0);
  return <>
            <GlobalStatus id="custom-status" autoScroll={false} onClose={() => toggleUpdateStatus(0)} onHide={() => toggleUpdateStatus(0)} />
            <Button text={`Show step #${count}`} onClick={() => {
      toggleUpdateStatus(count + 1);
      if (count >= 3) {
        toggleUpdateStatus(0);
      }
    }} top="small" />
            {count === 1 && <>
                <GlobalStatus.Add id="custom-status" statusId="custom-id-1" title="New title" text="First long info text ..." item="Item from status #1" onClose={({
        statusId
      }) => {
        console.log('onClose 1', statusId);
      }} />
                <GlobalStatus.Add id="custom-status" statusId="custom-id-2" text="Second long info text ..." item="Item from status #2" onClose={({
        statusId
      }) => {
        console.log('onClose 2', statusId);
      }} />
              </>}
            {count === 2 && <GlobalStatus.Remove id="custom-status" statusId="custom-id-2" />}
            {count === 3 && <GlobalStatus.Remove id="custom-status" statusId="custom-id-1" />}
          </>;
}
render(<AddRemoveItems />);
```


### To showcase the scrolling

NB: this demo only works once, so you'll have to refresh the browser to try again :)


```tsx
render(<Button text="Scroll to main GlobalStatus" onClick={() => {
  GlobalStatus.Update({
    id: 'main-status',
    text: 'Dui consectetur viverra aenean vestibulum ac tristique sem ligula condimentum'
  });
}} />)
```

## Properties


```json
{
  "props": {
    "id": {
      "doc": "The main ID. Defaults to `main`.",
      "type": "string",
      "status": "optional"
    },
    "title": {
      "doc": "The title appears as a part of the status content. Defaults to `En feil har skjedd`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "text": {
      "doc": "The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "children": {
      "doc": "The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "items": {
      "doc": "The items (list items) appear as a part of the status content. You can both use a JSON array, or a vanilla array with a string or an object content. See **Item Object** example below.",
      "type": "Array<GlobalStatusItem>",
      "status": "optional"
    },
    "icon": {
      "doc": "The icon shown before the status title. Defaults to `exclamation`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "state": {
      "doc": "Defines the visual appearance of the status. There are four main statuses `error`, `warning`, `information` and `success`. The default status is `error`.",
      "type": [
        "\"error\"",
        "\"information\"",
        "\"warning\"",
        "\"success\""
      ],
      "status": "optional"
    },
    "iconSize": {
      "doc": "The icon size of the title icon shows. Defaults to `medium`.",
      "type": "string",
      "status": "optional"
    },
    "show": {
      "doc": "Set to `true` or `false` to manually make the global status visible. Defaults to `true`.",
      "type": [
        "boolean",
        "\"auto\""
      ],
      "status": "optional"
    },
    "autoClose": {
      "doc": "Set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`.",
      "type": "boolean",
      "status": "optional"
    },
    "autoScroll": {
      "doc": "Set to `true` to automatically scroll the page to the appeared global status. Defaults to `true`.",
      "type": "boolean",
      "status": "optional"
    },
    "noAnimation": {
      "doc": "Set to `true` to disable the show/hide/slide/fade/grow/shrink animation. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "delay": {
      "doc": "Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.",
      "type": [
        "number",
        "string"
      ],
      "status": "optional"
    },
    "hideCloseButton": {
      "doc": "Set to `true` if the close button should be hidden for the user. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "closeText": {
      "doc": "Text of the close button. Defaults to `Lukk`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "statusAnchorText": {
      "doc": "Defines the anchor text showing up after every item, in case there is a `statusId` defined. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "omitSetFocus": {
      "doc": "Set to `true` to omit setting the focus during visibility. Defaults to `false`. Additionally, there is `omitSetFocusOnUpdate` which is set to `true` by default.",
      "type": "boolean",
      "status": "optional"
    },
    "omitSetFocusOnUpdate": {
      "doc": "Set to `true` to omit setting the focus during update. Defaults to `true`.",
      "type": "boolean",
      "status": "optional"
    },
    "skeleton": {
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  }
}
```


## Translations


```json
{
  "locales": [
    "da-DK",
    "en-GB",
    "nb-NO",
    "sv-SE"
  ],
  "entries": {
    "GlobalStatus.closeText": {
      "nb-NO": "Lukk",
      "en-GB": "Close",
      "sv-SE": "Stäng",
      "da-DK": "Luk"
    },
    "GlobalStatus.defaultTitle": {
      "nb-NO": "En feil har skjedd",
      "en-GB": "An error has occurred",
      "sv-SE": "Ett fel har inträffat",
      "da-DK": "Der er opstået en fejl"
    },
    "GlobalStatus.statusAnchorText": {
      "nb-NO": "Gå til %s",
      "en-GB": "Go to %s",
      "sv-SE": "Gå till %s",
      "da-DK": "Gå til %s"
    }
  }
}
```


## Item Object

```js
// simple
const items = ['Item #1', 'Item #2']

// advanced
const items = [
  { text: 'Item #1', statusId: 'id-1' },
  { text: 'Item #2', statusId: 'id-2', statusAnchorUrl: 'https://' },
]
```

## Advanced Item Properties


```json
{
  "props": {
    "text": {
      "doc": "The text appears as the status content. Besides plain text, you can send in a React component as well.",
      "type": "string",
      "status": "required"
    },
    "statusId": {
      "doc": "Defines a unique ID so the message can be either updated or removed individually.",
      "type": "string",
      "status": "required"
    },
    "statusAnchorUrl": {
      "doc": "Use `statusAnchorUrl={true}` to enable the go-to link, defined as a url hash using the `statusId`. Or provide it with an actual url: `statusAnchorUrl=\"https://\"`.",
      "type": "string",
      "status": "optional"
    },
    "statusAnchorText": {
      "doc": "Defines the anchor text showing up after every item. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition.",
      "type": "string",
      "status": "optional"
    },
    "statusAnchorLabel": {
      "doc": "Adds an additional text to the anchor (replaces `%s`), showing up after every item. Is used by default by other form components, if they have an `label`.",
      "type": "string",
      "status": "optional"
    }
  }
}
```


## Controllers

In React, you can make use of the helper components, the function as a kind of a controller component.
The goal is to update the content (properties/events) of the target GlobalStatus.


```tsx
{/* Place the status wherever you have to.*/}
<GlobalStatus id="custom-id" />
{/* Manipulate the status later on. Every property is optional.*/}
<GlobalStatus.Add id="custom-id" statusId="status-1" item="Item #1" text="New Text" onClose={({
statusId
}) => {
console.log('onClose', statusId);
}} />
<GlobalStatus.Add id="custom-id" statusId="status-2" item="Item #2" text="New Text" title="New Title" onClose={({
statusId
}) => {
console.log('onClose', statusId);
}} />
<GlobalStatus.Add id="custom-id" statusId="status-3" item="Item #3" text="Text #3" onClose={({
statusId
}) => {
console.log('onClose', statusId);
}} />
{/* or update the status.*/}
<GlobalStatus.Update id="custom-id" text="text" />
{/* Later you can remove a resolved item.*/}
<GlobalStatus.Remove id="custom-id" statusId="status-3" />
```


## Controller Properties


```json
{
  "props": {
    "id": {
      "doc": "The main ID. Defaults to `main`.",
      "type": "string",
      "status": "optional"
    },
    "statusId": {
      "doc": "Define a new stack ID so you can remove it with the same ID later on. Defaults to `null`.",
      "type": "string",
      "status": "optional"
    },
    "removeOnUnmount": {
      "doc": "Set to `true` if you want that the component `<GlobalStatus.Add removeOnUnmount={true} ... />` should automatically remove the stacked status from the target **GlobalStatus** on component unmount. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    }
  }
}
```


## Configuration Object

This object is used as a representation to configure the GlobalStatus component from other components, using the `globalStatus` property.
See [Autocomplete](/uilib/components/autocomplete/properties), [Button](/uilib/components/button/properties), [Input](/uilib/components/input/properties), etc, as examples that use the `globalStatus` property.

```js
{
  id: 'global-status-id',
  message: 'global status message'
}
```

## Configuration Object Properties


```json
{
  "props": {
    "id": {
      "doc": "The main ID. Defaults to `main`.",
      "type": "string",
      "status": "optional"
    },
    "message": {
      "doc": "The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.",
      "type": "React.ReactNode",
      "status": "optional"
    }
  }
}
```

## Events


```json
{
  "props": {
    "onOpen": {
      "doc": "Gets triggered the first time the GlobalStatus appears on the screen. In other words, it has to have been hidden before. Returns `{ id, statusId, ...properties }`.",
      "type": "function",
      "status": "optional"
    },
    "onShow": {
      "doc": "Gets triggered for the first time and for every new content update the GlobalStatus gets. Returns `{ id, statusId, ...properties }`.",
      "type": "function",
      "status": "optional"
    },
    "onClose": {
      "doc": "Gets triggered once the GlobalStatus disappears from the screen. Works only if `noAnimation` is not `true`. Returns `{ id, statusId, ...properties }`.",
      "type": "function",
      "status": "optional"
    },
    "onHide": {
      "doc": "Gets triggered once the GlobalStatus is getting closed/hidden by the user. Returns `{ id, statusId, ...properties }`.",
      "type": "function",
      "status": "optional"
    },
    "onAdjust": {
      "doc": "Gets triggered once the GlobalStatus is getting new content by the user. Returns `{ id, statusId, ...properties }`.",
      "type": "function",
      "status": "optional"
    }
  }
}
```