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 | |
|---|---|---|
text | React.ReactNode | (optional) The status message. Prefer plain text that explains the status and how to resolve it. React content supports inline links and grouped messages. Custom content or actions beyond the documented patterns need a use case approved by DNB UX. |
children | React.ReactNode | (optional) Alternative to text, with the same usage guidance. Supports inline links and the grouped messages rendered by FieldBlock. Custom content or actions beyond the documented patterns need a use case approved by DNB UX. |
role | string | (optional) The role attribute for accessibility, defaults to alert. |
state | "error" "warning" "information" "success" "marketing" | (optional) Defines the visual appearance of the status. These are the statuses error, warning, information, success and marketing. The default status is error. |
size | "default" "large" | (optional) Defines the appearance size. Available sizes are default and large. The default size is default. |
icon | React.ReactNode | (optional) The icon shown before the status message. The default icon is selected by state. Keep this default unless DNB UX has approved a use case for replacing or removing it. |
iconSize | string | (optional) The size of the icon. Defaults to medium. Keep this default unless DNB UX has approved a use case for a different size. |
variant | "plain" "outlined" | (optional) As of now, there is the plain and the outlined variant. Defaults to plain. |
stretch | boolean | (optional) If set to true, then the FormStatus will be 100% in available width. NB: Only use this on independent status messages. |
show | boolean | (optional) Provide false if you want to animate the visibility. Defaults to true. |
noAnimation | boolean | (optional) true to omit the animation on content visibility. Defaults to false. |
globalStatus | Various | (optional) The configuration used for the target GlobalStatus. |
shellSpace | string object | (optional) Use it to set an inner margin. It supports the same properties as Space. Useful for animation. |
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. |