# CloseButton **Category**: native **URL**: https://www.heroui.com/docs/native/components/close-button **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/components/(buttons)/close-button.mdx > Button component for closing dialogs, modals, or dismissing content. *** ## Import ```tsx import { CloseButton } from 'heroui-native'; ``` ## Usage ### Basic Usage The CloseButton component renders a close icon button with default styling. ```tsx ``` ### Custom Icon Color Customize the icon color using the `iconProps` prop. ```tsx ``` ### Custom Icon Size Adjust the icon size using the `iconProps` prop. ```tsx ``` ### Custom Children Replace the default close icon with custom content. ```tsx ``` ### Disabled State Disable the button to prevent interactions. ```tsx ``` ## Example ```tsx import { CloseButton, useThemeColor } from 'heroui-native'; import { Ionicons } from '@expo/vector-icons'; import { View } from 'react-native'; import { withUniwind } from 'uniwind'; const StyledIonicons = withUniwind(Ionicons); export default function CloseButtonExample() { const themeColorForeground = useThemeColor('foreground'); const themeColorDanger = useThemeColor('danger'); return ( ); } ``` You can find more examples in the [GitHub repository](https://github.com/heroui-inc/heroui-native/blob/main/example/src/app/(home)/components/close-button.tsx). ## API Reference ### CloseButton CloseButton extends all props from [Button](./button) component. It defaults to `variant='tertiary'`, `size='sm'`, and `isIconOnly=true`. | prop | type | default | description | | ----------- | ---------------------- | ------- | ------------------------------------------------ | | `iconProps` | `CloseButtonIconProps` | - | Props for customizing the close icon | | `children` | `React.ReactNode` | - | Custom content to replace the default close icon | For inherited props including `isDisabled`, `className`, `animation`, `feedbackVariant` and all Pressable props, see [Button API Reference](./button#api-reference). #### CloseButtonIconProps | prop | type | default | description | | ------- | -------- | ---------------------- | ----------------- | | `size` | `number` | `20` | Size of the icon | | `color` | `string` | Uses theme muted color | Color of the icon |