React Native Mantine › Buttons
ActionIcon
Compact icon button for actions
Import: import { ActionIcon } from 'react-native-mantine';
Usage
import { ActionIcon, Text } from 'react-native-mantine';
<ActionIcon
color="blue"
size="md"
onPress={() => console.log('Clicked')}
>
<Text>×</Text>
</ActionIcon>Props
| Prop | Type | Default | Description |
|---|---|---|---|
onPress | (payload: any) => void | Function called when the action icon is pressed | |
children | React.ReactNode | Icon or content to display inside the action icon button (typically an icon component) | |
color | string | Custom color for the action icon background or border | |
variant | 'filled' | 'light' | 'outline' | 'transparent' | 'default' | "default" | Controls action icon appearance - filled (solid background), light (subtle background), outline (border only), transparent (no background), or default (theme-based) |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | "md" | Action icon size as predefined value (xs: 18px, sm: 22px, md: 28px, lg: 34px, xl: 44px) or custom number in pixels |
style | ViewStyle | Additional styles to apply to the action icon container |