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>

Actions

Use Link when one or more actions are required within a Status Message.

<StatusMessage skin="help">
  <div>
    Can't find what you need? Visit <Link href="#">Help Center</Link> or{' '}
    <Link href="#">chat to us online</Link>.
  </div>
</StatusMessage>

<StatusMessage skin="help">
  <div>
    Can't find what you need? Visit <Link href="#">Help Center</Link> or{' '}
    <Link href="#">chat to us online</Link>.
  </div>
</StatusMessage>

Implementation

Accessible Text For Icon

When the severity of a Status Message is not obvious from text alone, a label for the icon must be provided using the accessibleTextForIcon prop. This will announce the severity to assistive technology.

Best practices

Ensure the semantic intent of the message matches the skin.
Use a single Status Message per message to be communicated.

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
accessibleTextForIcon	`string`	false	Accessible text for the icon, that should be used for screen readers. Typically it should indicate the type of alert eg. "info", "warning"	null