The Loading component has been designed with accessibility in mind.

The component offers flexibility in terms of the HTML element used for the root node. By default, it will render a div element.

Optional prop title allows you to specify a title value of the loader (svg) image. This value is announced by a screen reader. This prop should ideally be translated.

When text prop is filled in, then providing value for title prop is not needed and it could be redundant as the text prop will be announced by the screen reader.

The prop asComponent is optional and it is set to a div by default. This can be used when the Loading component is wrapped by another component which requires a phrasing element as a children.

Be aware that Loading component is always rendered as a div element when the prop text is filled in.

<Button>
  <Loading title="Title of the button is loading" asComponent="span" />
</Button>

We have a Loading component inside a Button component (which requires phrasing element as a children). In this case, we can use the asComponent prop to specify the root node of the Loading component.

The screen reader will announce the value title (Title of the button is loading).