## 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 <a/> tag
A react router <Link/> tag
A native <button/> tag
);
};
```
## Common Use Case Examples
### Marketing card
- description: Allow users to dismiss a promotional marketing card by passing a close button as `` controls.
- example:
```jsx
}>
}
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
}
>
;
```