Chip Component

A versatile and customizable React component for displaying interactive chips.

Example Preview

Chip Example

Usage

import React from "react";
import { Chip } from "@/@core";
 
const MyComponent = () => {
  const handleChipClick = () => {
    // Handle chip click event
  };
 
  const handleDelete = () => {
    // Handle chip delete event
  };
 
  return (
    <Chip
      label="Example Chip"
      onClick={handleChipClick}
      onDelete={handleDelete}
      size="medium"
      color="primary"
      variant="filled"
      skin="light"
      rounded={false}
      // Add other props as needed
    />
  );
};
 
export default MyComponent;

Props

Prop	Type	Description
`label`	`string`	The text content of the chip.
`onClick`	`() => void`	A callback function to be executed when the chip is clicked.
`component`	`ElementType`	The HTML element type or React component to be used for the chip. Defaults to `'div'`.
`href`	`string`	The URL to navigate to when the chip is clicked.
`target`	`string`	The target attribute for the link specified in `href`.
`clickable`	`boolean`	If `true`, the chip will be clickable, triggering the `onClick` or navigation to `href`.
`icon`	`ReactNode`	An optional icon element to be displayed within the chip.
`color`	`primary` `secondary`, `success`, `warning`, `error`, `info`, `accent`, `base`	The color of the chip. Defaults to `'base'`.
`variant`	`string`	The visual style variant of the chip (e.g., filled, outlined). Defaults to `'filled'`.
`size`	`small` `medium` `large`	The size of the chip.
`skin`	`light`, `dark'`	The color scheme of the chip.
`rounded`	`boolean`	If `true`, the chip will have rounded corners.
`onDelete`	`() => void`	A callback function to be executed when the delete icon is clicked.
`deleteIcon`	`ReactNode`	An optional delete icon element to be displayed within the chip.
`className`	`string`	Additional CSS classes to be applied to the chip.

Examples

// Import the Chip component
import { Chip } from "@/@core";
 
// Create a simple chip
const SimpleChip = () => {
  return <Chip label="Simple Chip" />;
};
 
// Create a clickable chip with an icon
const ClickableChip = () => {
  return (
    <Chip
      label="Clickable Chip"
      onClick={() => alert("Chip clicked")}
      clickable
      icon={<YourIconComponent />}
    />
  );
};
 
// Create a chip with delete functionality
const DeletableChip = () => {
  return (
    <Chip
      label="Deletable Chip"
      onDelete={() => alert("Delete icon clicked")}
      deleteIcon={<YourDeleteIconComponent />}
    />
  );
};

Feel free to customize the Chip component according to your application's needs.

Chat Bubble Code Snippet