Chips are compact elements that represent input, attributes, or actions. They allow users to enter information, make selections, filter content, or trigger actions.
import { Chip } from '@naturacosmeticos/natds-web';
Basic Chip
import { Chip } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Chip label="Basic Chip" />
);
}
Clickable Chip
import { Chip } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Chip
label="Clickable"
clickable
onClick={() => console.log('Chip clicked')}
/>
);
}
Deletable Chip
Add a delete icon to allow chip removal:
import { Chip } from '@naturacosmeticos/natds-web';
function Example() {
const handleDelete = () => {
console.log('Delete clicked');
};
return (
<Chip
label="Deletable"
onDelete={handleDelete}
/>
);
}
Chip with Avatar
import { Chip, Avatar } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Chip
label="User Chip"
avatar={<Avatar src="profile.jpg" alt="User" />}
onDelete={() => {}}
/>
);
}
Chip with Icon
import { Chip, Icon } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Chip
label="Icon Chip"
icon={<Icon name="filled-default-mockup" size="tiny" />}
onDelete={() => {}}
/>
);
}
Variants
Chip supports two variants: default (filled) and outlined:
import { Chip } from '@naturacosmeticos/natds-web';
function VariantExamples() {
return (
<>
<Chip label="Default" variant="default" color="primary" />
<Chip label="Outlined" variant="outlined" color="primary" />
</>
);
}
import { Chip } from '@naturacosmeticos/natds-web';
function ColorExamples() {
return (
<>
<Chip label="Default" color="default" />
<Chip label="Primary" color="primary" />
<Chip label="Secondary" color="secondary" />
</>
);
}
default, primary, secondary
Chip is available in two sizes:
import { Chip } from '@naturacosmeticos/natds-web';
function SizeExamples() {
return (
<>
<Chip label="Small" size="small" color="primary" />
<Chip label="Medium" size="medium" color="primary" />
</>
);
}
small, medium
Custom Delete Icon
Customize the delete icon:
import { Chip, Icon } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Chip
label="Custom Delete"
color="primary"
onDelete={() => {}}
deleteIcon={<Icon name="filled-action-delete" size="tiny" />}
/>
);
}
Disabled State
import { Chip } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Chip
label="Disabled"
color="primary"
disabled
onDelete={() => {}}
/>
);
}
IChipProps
The content of the label.
color
'default' | 'primary' | 'secondary'
default:"default"
The color of the component. Supports theme colors.
size
'small' | 'medium'
default:"medium"
The size of the chip.
variant
'default' | 'outlined'
default:"default"
The variant to use.
If true, the chip will appear clickable and will raise when pressed. If false, the chip will not be clickable even if onClick prop is defined.
If true, the chip is displayed in a disabled state.
Avatar element to display at the start of the chip.
Icon element to display at the start of the chip.
Override the default delete icon element. Shown only if onDelete is set.
Callback fired when the delete icon is clicked. If set, the delete icon will be shown.
Callback fired when the chip is clicked.
component
React.ReactElement
default:"div"
The component used for the root node.
Override or extend the styles applied to the component.
Use Cases
Chips are commonly used for:
- Tags: Representing categories or labels
- Filters: Active filter selections that can be removed
- Contacts: List of selected contacts with avatars
- Input: Multiple selection input fields
- Categories: Compact category indicators
Advanced Usage
For more advanced use cases and additional props, refer to the Material-UI Chip documentation. 
