CompactStateMessage

Type: React component

How to get CompactStateMessage?

JavaScript

import { CompactStateMessage } from 'fds/components';

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.

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

    (Optional)

    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

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

  5. paddingSize

    (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

  6. visual

    (Required)

    Type: String | ReactNode

    The visual to render. When providing a string value, an Icon will be rendered in the provided connotation color. When providing a component instance, that component instance will be directly used as the visual.