Status Message

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="Info"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-info swan-icon-type-info"
    style='mask-image: url("{{ "info" | icon }}");'
  />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="Info"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-info swan-icon-type-info"
    style='mask-image: url("{{ "info" | icon }}");'
  />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.

ReactVanilla

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

<StatusMessage skin="info">This is an "info" 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="Info"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-info swan-icon-type-info"
    style='mask-image: url("{{ "info" | icon }}");'
  />This is an "info" 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="Info"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-info swan-icon-type-info"
    style='mask-image: url("{{ "info" | icon }}");'
  />This is an "info" status message
</div>

Success

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

ReactVanilla

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

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

<div
  class="swan-status-message swan-status-message-skin-success swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Success"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-success swan-icon-type-success"
    style='mask-image: url("{{ "success" | icon }}");'
  />This is a "success" status message
</div>

<div
  class="swan-status-message swan-status-message-skin-success swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Success"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-success swan-icon-type-success"
    style='mask-image: url("{{ "success" | icon }}");'
  />This is a "success" status message
</div>

Warning

Use skin="warning" for cautionary messages.

ReactVanilla

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

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

<div
  class="swan-status-message swan-status-message-skin-warning swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Warning"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-warning swan-icon-type-warning"
    style='mask-image: url("{{ "warning" | icon }}");'
  />This is a "warning" status message
</div>

<div
  class="swan-status-message swan-status-message-skin-warning swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Warning"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-warning swan-icon-type-warning"
    style='mask-image: url("{{ "warning" | icon }}");'
  />This is a "warning" status message
</div>

Error

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

ReactVanilla

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

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

<div
  class="swan-status-message swan-status-message-skin-error swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Error"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-error swan-icon-type-error"
    style='mask-image: url("{{ "error" | icon }}");'
  />This is an "error" status message
</div>

<div
  class="swan-status-message swan-status-message-skin-error swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Error"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-error swan-icon-type-error"
    style='mask-image: url("{{ "error" | icon }}");'
  />This is an "error" status message
</div>

Help

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

ReactVanilla

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

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

<div
  class="swan-status-message swan-status-message-skin-help swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Help"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-help swan-icon-type-helpQuery"
    style='mask-image: url("{{ "helpQuery" | icon }}");'
  />This is a "help" status message
</div>

<div
  class="swan-status-message swan-status-message-skin-help swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Help"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-help swan-icon-type-helpQuery"
    style='mask-image: url("{{ "helpQuery" | icon }}");'
  />This is a "help" status message
</div>

Size

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

ReactVanilla

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

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

<div
  class="swan-status-message swan-status-message-skin-info swan-status-message-size-small"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Info"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-small swan-icon-skin-info swan-icon-type-info"
    style='mask-image: url("{{ "info" | icon }}");'
  />This is a "small" size status message
</div>

<div
  class="swan-status-message swan-status-message-skin-info swan-status-message-size-small"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Info"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-small swan-icon-skin-info swan-icon-type-info"
    style='mask-image: url("{{ "info" | icon }}");'
  />This is a "small" size status message
</div>

Actions

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

ReactVanilla

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

<div
  class="swan-status-message swan-status-message-skin-help swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Help"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-help swan-icon-type-helpQuery"
    style='mask-image: url("{{ "helpQuery" | icon }}");'
  />
  <div>
    Can't find what you need? Visit
    <a href="#" class="swan-link">Help Center</a> or
    <a href="#" class="swan-link">chat to us online</a>.
  </div>
</div>

<div
  class="swan-status-message swan-status-message-skin-help swan-status-message-size-standard"
>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="Help"
    draggable="false"
    class="swan-icon swan-icon-mask swan-icon-size-standard swan-icon-skin-help swan-icon-type-helpQuery"
    style='mask-image: url("{{ "helpQuery" | icon }}");'
  />
  <div>
    Can't find what you need? Visit
    <a href="#" class="swan-link">Help Center</a> or
    <a href="#" class="swan-link">chat to us online</a>.
  </div>
</div>

Best practices

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

Content

Errors as Status Messages

All error messages should align with our Foundational Standards for Error States.

Errors using the Status Message component may consist of:

Body copy (required)
- Limit body copy to 1–2 sentences
- Don’t use end punctuation for body copy with just 1 sentence or phrase
- When using multiple sentences, do use end punctuation for all sentences
  - Exception: Don’t use end punctuation after Links
Link or Link as Button (optional)
- In error messages, Links should be actionable and function as CTAs. Don’t use generic language like “Click here.” Use specific actions, like “Update billing information” instead
- Place Links at the end of the message
- Don’t use end punctuation when ending with a Link

Place Status Messages inline with the relevant content block. Reference Communicating System Feedback for additional information.

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	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. Accessible text for the icon, that should be used for screen readers. Typically it should indicate the type of alert eg. "info", "warning"	null

Internationalization

SWAN's Internationalization System allows SWAN components to render with fully translated and accessible text out-of-the-box. The following keys are provided to allow you to override the default translation.

Default Text	Key
Error Accessible label to denote the severity of an 'error' Status Message	`status-message.accessible-text-for-skin-error-icon`
Help Accessible label to denote the severity of a 'help' Status Message	`status-message.accessible-text-for-skin-help-icon`
Information Accessible label to denote the severity of an 'information' Status Message	`status-message.accessible-text-for-skin-info-icon`
Success Accessible label to denote the severity of a 'success' Status Message	`status-message.accessible-text-for-skin-success-icon`
Warning Accessible label to denote the severity of a 'warning' Status Message	`status-message.accessible-text-for-skin-warning-icon`

Use Status Message...

Don't use Status Message...

Skin

Info

Success

Warning

Error

Help

Size

Actions

Best practices

Content

Errors as Status Messages

Props

Internationalization

Related