Chip

Import

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

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

Example



Chip

const [ isSelected, setSelected ] = useState( false );

return (
    <Chip
        label="Chip"
        selected={isSelected}
        icon={<Icon name="earth-outline" as={Ionicons} />}
        onPress={() => setSelected( !isSelected )}
        onDeletePress={() => { window?.alert( 'Delete pressed!' ); }}
    />
);

Props

label

The label text to show above the chip component.

TYPE	REQUIRED
string	No

Label text

<Chip label="Label text" />

icon

An icon to show at left side of the chip.

TYPE	REQUIRED
ReactElement<IIconProps>	No



Chip

<Chip
    label="Chip"
    icon={<Icon name="earth-outline" as={Ionicons} />}
/>

selected

If the chip is selected or not.

TYPE	REQUIRED	DEFAULT
boolean	No	false

Chip

Chip

<Chip label="Chip" />
<Chip label="Chip" selected />

onPress

A callback that is called when the chip is pressed.

TYPE	REQUIRED
(): void	No

Chip

<Chip
    label="Chip"
    onPress={() => { window.alert( 'Chip pressed!' );}}
/>

onDeletePress

A callback that is called when the chip's delete icon is pressed.

TYPE	REQUIRED
(): void	No

info

The delete icon is only shown when this prop is not undefined nor null.

Chip

<Chip
    label="Chip"
    onDeletePress={() => { window.alert( 'Delete pressed!' );}}
/>

deleteIcon

The icon used as the delete icon.

TYPE	REQUIRED
ReactElement<IIconProps>	No

info

Remember that the delete icon is only shown when the onDeletePress prop is not undefined nor null.

Chip



<Chip
    label="Chip"
    onDeletePress={() => { window.alert( 'Delete pressed!' );}}
    deleteIcon={<Icon name="trash-outline" as={Ionicons} />}
/>

disabled

If the chip is disabled or not. Boolean.



Chip

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

Pseudo Props

__label

Props to be applied to the internal text component showing the label text.

TYPE	REQUIRED
ITextProps	No

__icon

Props to be applied to the internal icon component.

TYPE	REQUIRED
IIconProps	No

__deleteIcon

Props to be applied to the internal delete icon component.

TYPE	REQUIRED
IIconProps	No

__stack

Props to be applied to the internal delete stack component holding the left icon, the label and the delete icon.

TYPE	REQUIRED
IBoxProps	No