+ );
+};
+
+export default App;
+
+
+/*
+ The first chip has a label "Tag 1" and is associated with the handleDelete function. The second chip has a label "Tag 2" and doesn't have a delete functionality.
+*/
\ No newline at end of file
diff --git a/src/Chip/chip.stories.tsx b/src/Chip/chip.stories.tsx
new file mode 100644
index 0000000..5c4a054
--- /dev/null
+++ b/src/Chip/chip.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import Chip, { ChipProps } from './Chip';
+
+export default {
+ title: 'Components/Chip',
+ component: Chip,
+} as Meta;
+
+const Template: Story = (args) => ;
+
+export const Default = Template.bind({});
+Default.args = {
+ label: 'Tag 1',
+};
+
+export const WithDeleteButton = Template.bind({});
+WithDeleteButton.args = {
+ label: 'Tag 2',
+ onDelete: () => {
+ // Handle chip deletion logic
+ },
+};
diff --git a/src/Chip/chip.tsx b/src/Chip/chip.tsx
new file mode 100644
index 0000000..d45e6bb
--- /dev/null
+++ b/src/Chip/chip.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import './Chip.css';
+
+interface ChipProps {
+ label: string;
+ onDelete?: () => void;
+}
+
+const Chip: React.FC = ({ label, onDelete }) => {
+ return (
+
+ {label}
+ {onDelete && (
+
+ )}
+
+ );
+};
+
+export default Chip;
+
+/*
+label: Represents the text content of the chip.
+onDelete (optional): Callback function triggered when the delete button is clicked.
+*/