## Feature Examples ### Status - description:

Control the indication type with the status prop:

  • error - use it to highlight invalid values, failed actions and processes.
  • warning - use it to highlight areas that require extra attention, like if a password has been compromised.
  • success - use it to highlight valid values, successful actions or processes.
  • loading - use it to show that an input value is being loaded.
    • - example: ```jsx Error Warning Success Loading ; ``` ### Message - description:

    Explain the status with a message prop.

    The message is revealed in a tooltip when the users’ mouse hovers over the status icon.

    - example: ```jsx ; ``` ### Tooltip placement - description:

    Position the tooltip with the tooltipPlacement prop:

  • top (default)
  • right
  • bottom
  • left
    • - example: ```jsx Top: Left: Bottom: Right: ; ``` ## Common Use Case Examples ### Built-in part of form elements - description:

    A status indicator is used as a building block for a variety of form components that require validation or data processing. Avoid using these indicators for status messages unless absolutely necessary, like for very compact layouts.

    Showing the status message directly below the component is preferred in all default cases. For this, use prop statusMessage.

    - example: ```jsx For narrow layouts only: For all default cases: ; ```