StateMessage

Type: React component

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

  1. callToAction

    (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

  2. 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

  3. message

    (Optional)

    Default value

  4. onRef

    (Optional)

    Default value

  5. paddingSize

    (Optional)

    Default value

  6. title

    (Optional)

    Type: FDS~Title

    Default value

  7. visual

    (Required)