Status Message

Context-level notice to draw attention to success, information, warning, error, or help messages.

styleKeys: statusMessage

UsageGuidelinesAPI

Use Status Message...

For alert messages that apply to a specific section of the page.
To communicate the status of an order.

Don't use Status Message...

For alert messages that apply to an entire page, or that float over page content. Use Alert Box instead.
For individual form field errors. Refer to Error guidelines for Forms.

ReactVanilla

<StatusMessage>This is a status message</StatusMessage>

<StatusMessage>This is a status message</StatusMessage>

<div
  class="swan-status-message swan-status-message-skin-info swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt=""
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-info swan-icon-type-info"
    style='mask-image: url("/v3/icons/info.b64b18161f0d5f737b78d50f684fb742.svg");'
  />
  This is a status message
</div>

<div
  class="swan-status-message swan-status-message-skin-info swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt=""
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-info swan-icon-type-info"
    style='mask-image: url("/v3/icons/info.b64b18161f0d5f737b78d50f684fb742.svg");'
  />
  This is a status message
</div>

Skin

The skin prop dictates the styling and Icon rendered in a Status Message.

Info

Use skin="info" for standard messages. This is the default skin.

<StatusMessage skin="info">This is an "info" status message</StatusMessage>

<StatusMessage skin="info">This is an "info" status message</StatusMessage>

Success

Use skin="success" for positive or success messages.

<StatusMessage skin="success">
  This is a "success" status message
</StatusMessage>

<StatusMessage skin="success">
  This is a "success" status message
</StatusMessage>

Warning

Use skin="warning" for cautionary messages.

<StatusMessage skin="warning">
  This is a "warning" status message
</StatusMessage>

<StatusMessage skin="warning">
  This is a "warning" status message
</StatusMessage>

Error

Use skin="error" for error or critical messages.

<StatusMessage skin="error">This is an "error" status message</StatusMessage>

<StatusMessage skin="error">This is an "error" status message</StatusMessage>

Help

Use skin="help" for messages directing users to further help such as CARE.

<StatusMessage skin="help">This is a "help" status message</StatusMessage>

<StatusMessage skin="help">This is a "help" status message</StatusMessage>

Size

Use size="mini" to reduce the size of a Status Message.

<StatusMessage size="small">
  This is a "small" size status message
</StatusMessage>

<StatusMessage size="small">
  This is a "small" size status message
</StatusMessage>

Best practices

Ensure the semantic intent of the message matches the skin.
Don't use too many Status Messages on a single page.

Props

StatusMessage

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
skin	`"info" \| "success" \| "warning" \| "error" \| "help"`	false	The visual style of the StatusMessage	info
size	`"standard" \| "small"`	false	The size of the StatusMessage	standard