## Feature Examples ### Dimensions - description:

Specify the component's dimensions in pixels or by percentage using the width and height properties.

- example: ```jsx ; ``` ### Status - description:

Control the component's status using the status prop. It supports three states:

  • error indicates when an image failed to upload.
  • warning highlights that the media can’t be validated.
  • loading shows that the media file is loading.
    • - example: ```jsx ; ``` ### Status message - description:

    Add text that explains the status or what action the user should take with the statusMessage prop.

    Showing the status message inline, directly below the image viewer is preferred in all default cases.

  • To add an accessible inline message, wrap the component in a and add the statusMessage.
  • To add a status message in a tooltip that requires users to hover on the icon, use the statusMessage prop. Control tooltip placement with tooltipPlacement prop.

    • View more inline status message examples in .

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

    Supports two states:

  • No image source - uses component to upload media in a required way. Use addImageInfo to specify a message to display in a tooltip when users hover over the component.
  • With image source - use imageUrl prop to pass a link to a media file.
    • - example: ```jsx ; ``` ### Border radius - description:

    Remove default corner radius with the removeRoundedBorders prop. Use it when component is used as a part of another widget.

    - example: ```jsx ; ``` ### Disabled - description:

    Disable all viewer interactions with the disabled prop. Use it to highlight unavailable functions.

    Customize the tooltip's style with all common tooltipProps.

    - example: ```jsx ; ``` ### Actions - description:

    Control which actions are visible with the showUpdateButton, showDownloadButton and showRemoveButton props. Tooltip messages explaining the actions can be customized according to their need.

    - example: ```jsx ; ``` ## Common Use Case Examples ### Form - description:

    Use image viewer in forms where only a single image can be uploaded at a time, e.g., a cover for an event, group or program.

    - example: ```jsx ; ```