## Feature Examples ### Size - description:

Use size prop to choose the size of the close button:

  • Use large in larger size layouts, such as or modals.
  • Use medium in medium size layouts, such as .
  • Use small (default) for common use cases.
    • - example: ```jsx ; ``` ### Skin - description:

    Use skin prop to control the appearance of the close button.

  • Use standard on white backgrounds.
  • Use standardFilled on white backgrounds when action needs to be emphasised.
  • Use transparent on colour or image backgrounds.
  • Use light on dark backgrounds.
  • Use dark on white or light color backgrounds.

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

    Use disabled prop to disable all close button interactions and to highlight unavailable functions.

    - example: ```jsx ; ``` ## Developer Examples ### Custom HTML tag - description:

    Use as prop to render close button as any given HTML tag.

    For example, they can be rendered as:

  • when attributes like href, target, etc., are needed.
  • when props like to, replace, etc. are needed.

    • All attributes will be passed to the rendered HTML tag.

    - example: ```jsx () => { const ReactRouterLink = (props) =>
    ; return ( An tag A react router tag A native } size="small" image={ } /> ; ``` ### Custom icon - description:

    To add a help icon next to the close button, pass the help icon as a child element to .

    This is valid only when the help icon is next to the close button. For all other cases use instead.

    While it is possible to override the x icon with any other icon, it is not recommended to ensure the component's consistency.

    - example: ```jsx } > ; ```