Global status#

Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.

Properties#

	Type	Description
`id`	`string`	(optional) The main ID. Defaults to `main`.
`title`	`React.ReactNode`	(optional) The title appears as a part of the status content. Defaults to `En feil har skjedd`.
`text`	`React.ReactNode`	(optional) The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
`children`	`React.ReactNode`	(optional) The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
`items`	`Array<GlobalStatusItem>`	(optional) 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.
`icon`	`React.ReactNode`	(optional) The icon shown before the status title. Defaults to `exclamation`.
`state`	`"error"` `"information"` `"warning"` `"success"`	(optional) Defines the visual appearance of the status. There are four main statuses `error`, `warning`, `information` and `success`. The default status is `error`.
`iconSize`	`string`	(optional) The size of the title icon. Defaults to `medium`.
`show`	`boolean` `"auto"`	(optional) Set to `true` or `false` to manually make the global status visible. Defaults to `auto`.
`autoClose`	`boolean`	(optional) Set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`.
`autoScroll`	`boolean`	(optional) Set to `true` to automatically scroll the page to the appeared global status. Defaults to `true`.
`noAnimation`	`boolean`	(optional) Set to `true` to disable the show/hide/slide/fade/grow/shrink animation. Defaults to `false`.
`delay`	`number` `string`	(optional) Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.
`hideCloseButton`	`boolean`	(optional) Set to `true` if the close button should be hidden for the user. Defaults to `false`.
`closeText`	`React.ReactNode`	(optional) Text of the close button. Defaults to `Lukk`.
`statusAnchorText`	`React.ReactNode`	(optional) Defines the anchor text showing up after every item that has a go-to link (`statusAnchorUrl`). Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition.
`omitSetFocus`	`boolean`	(optional) Set to `true` to omit setting the focus during visibility. Defaults to `false`. Additionally, there is `omitSetFocusOnUpdate` which is set to `true` by default.
`omitSetFocusOnUpdate`	`boolean`	(optional) Set to `true` to omit setting the focus during update. Defaults to `true`.
`skeleton`	`boolean`	(optional) If set to `true`, an overlaying skeleton with animation will be shown.
`Space`	`string` `object`	(optional) Spacing properties like `top` or `bottom` are supported.

Translations#

More info about translations can be found in the general localization and Eufemia Forms localization docs.

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

Item Object#

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

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

Advanced Item Properties#

	Type	Description
`text`	`string` `React.ReactNode`	(required) The text appears as the status content. Besides plain text, you can send in a React component as well.
`itemId`	`string`	(optional) Defines a unique ID for the item, so it can be updated individually: an item with the same `itemId` replaces the existing one. The go-to link of `statusAnchorUrl={true}` points to the element with this ID. Defaults to an ID made from the `text`.
`id`	`string` `number`	(optional) Defines the `id` of the element that shows the item text. The go-to link refers to it with `aria-describedby`.
`statusAnchorUrl`	`string` `boolean`	(optional) Use `statusAnchorUrl={true}` to enable the go-to link, defined as a url hash using the `itemId`. Or provide it with an actual url: `statusAnchorUrl="https://"`.
`statusAnchorText`	`string`	(optional) Defines the anchor text showing up after every item. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition.
`statusAnchorLabel`	`string` `React.ReactNode`	(optional) 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 a `label`.

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.

{/* 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#

	Type	Description
`id`	`string`	(optional) The main ID. Defaults to `main`.
`statusId`	`string`	(optional) Define a new stack ID so you can remove it with the same ID later on. Defaults to `null`.
`removeOnUnmount`	`boolean`	(optional) 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`.

Configuration Object#

This object is used as a representation to configure the GlobalStatus component from other components, using the globalStatus property. See Autocomplete, Button, Input, etc, as examples that use the globalStatus property.

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

Configuration Object Properties#

	Type	Description
`id`	`string`	(optional) The main ID. Defaults to `main`.
`message`	`React.ReactNode`	(optional) The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.

Suggest an edit