Skip to main content

IconButton

Import​

To add the IconButton component to your project you can import it as follows:

import { IconButton } from '@amalgamaco/embassy-ui';

Example​

<IconButton
    padding="2"
    rounded="full"
    bg="accent.200"
    name="plus"
    onPress={() => { window && window.alert( 'Clicked!' );}}
/>

Props​

as​

The icon components family to use. See Icon - as prop documentation for more information.

import Ionicons from 'react-native-vector-icons/Ionicons';

<IconButton
    as={Ionicons}
    name="earth-outline"
    onPress={() => { window && window.alert( 'Clicked!' );}}
/>

name​

The name of the icon from the icon family selected to use. See Icon - name prop documentation for more information.

import Ionicons from 'react-native-vector-icons/Ionicons';

<IconButton
    as={Ionicons}
    name="earth-outline"
    onPress={() => { window && window.alert( 'Clicked!' );}}
/>

size​

The size of the icon button. See Icon - size prop documentation for more information.

<IconButton
    size="md"
    name="plus"
    size="2xl"
/>

color​

The color for the icon. See Icon - color prop documentation for more information.

<IconButton
    size="md"
    name="plus"
    color="success.600"
/>

onPress​

Called when the icon button is pressed. See Button - onPress prop documentation for more information.

<IconButton
    name="plus"
    onPress={() => { window && window.alert( 'Clicked!' );}}
/>

disabled​

If the button is disabled or not. Boolean.

<IconButton size="md" name="plus" disabled />

Pseudo Props​

__icon​

Box props to be applied to the internal icon component.

TYPEREQUIRED
IBoxPropsNo