Status Message | Components

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.

accessibleTextForIcon is deprecated in SWAN 3.24. This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system and remove this prop.

ReactVanilla

<StatusMessage accessibleTextForIcon="Info">
  This is a status message
</StatusMessage>

<StatusMessage accessibleTextForIcon="Info">
  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>

Accessibility

If you’re not using SWAN’s i18n system, an accessible 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	⚠️ 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