Type: React component

A compact version of StateMessage, only rendering a message in Text and visual (generally Icon). CompactStateMessage visualizes the current state of a component. Can be rendered in a connotation color, specifying the severity of the message.

CompactStateMessage is suited for use within relatively small areas, such as a Drop. Just like StateMessage CompactStateMessage is used as an interruptive message, meaning that the corresponding content is hidden and CompactStateMessage 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 Sidebar or Modal, consider using StateMessage instead.


  1. connotation


    Type: String

    Specifies the meaning and/or severity of the given context. The possible values are:

    • 'muted'

    • 'info'

    • 'success'

    • 'warning'

    • 'error'

    Default value

  2. isSingleLine


    Type: Boolean

    Whether or not to render the visual and message on a single line, defaults to true. When true, paddingSize is locked as 's' and can't be changed.

    Default value

  3. message


    Default value

  4. paddingSize


    Default value

  5. visual