State Message
Type: React component
How to get StateMessage?
JavaScript
import { StateMessage } from 'fds/components';
A message rendered in Text, a Heading and a visual (generally Icon). StateMessage visualizes the current state of (a part of) the application. Can be rendered in a connotation color, specifying the severity of the message.
StateMessage is suited for use in the content of relatively large areas, such as a sidebar or Modal. StateMessage is used as an interruptive message, meaning that the corresponding content is hidden and StateMessage is showed instead.
If the message should not be interruptive, consider using a Toast instead.
When displaying a message in a smaller area such as a Drop, consider using CompactStateMessage instead.
Props
call
To Action (Optional)
Type: React node
The call to action component to render, used when displaying a (errored) state that requires a specific action to resolve it. Generally a Button component with a label describing the action.
Default value
connotation
(Optional)
Type: String
Specifies the meaning and/or severity of the given context. The possible values are:
-
'muted'
-
'info'
-
'success'
-
'warning'
-
'error'
Default value
-
flex
(Optional)
Type: Number | String
The value to use for CSS' flex property.
Default value
message
(Optional)
Type: node
The human readable message displayed in the component, displayed inside a Text component if you use a string. If you want to display inlines (such as a TextLink component) inside your message. You have to provide the Text component yourself. In that case, take care to set the align and colorName prop as appropriate. For the align prop, use "center" or omit it as appropriate. For the colorName prop, use "text-muted-color".
Related links
Default value
on
Ref (Optional)
Type: Function
A callback that is called whenever a component's ref changes.
Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.
For more information about React and "refs", check the React documentation
Arguments
Returns
Default value
padding
Size (Optional)
Type: Number | String | Object
The amount of padding rendered by the component.
This should be a either, A single size value, one of the following values:
-
0 (zero, no padding at all)
-
's' (small)
-
'm' (medium)
-
'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.
Or you can pass an object whose properties determine a specific padding size for either:
-
'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)
-
'vertical': %single size value% to set the 'top' and 'bottom' padding
Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.
Default value
-
title
(Optional)
Type: String
The title displayed in the component, generally presented inside a Heading component.
Default value