stest1-chip v0.0.9

Chip Tag

A chip tag is a type of graphical user interface (GUI) element that displays a small piece of information, such as a category or a label, in a compact and visually appealing way. It is often used to represent a filter or a tag in a user interface. A chip tag typically consists of a small rectangular or circular shape with text or an icon inside it. It may also have a close button or an icon to remove the tag. Chip tags are commonly used in web and mobile applications to help users quickly identify and manage their selections or preferences.

Info

A chip tag is a type of user interface (UI) element that is used to display a small piece of information, such as a category or a label, in a compact and visually appealing way. It is often used to represent a filter or a tag in a user interface. A chip tag typically consists of a small rectangular or circular shape with text or an icon inside it. It may also have a close button or an icon to remove the tag.

We can specify the background color, border color, Icon, Badge so that any kind of style change change can be achieved.

Installation

npm install --save chip

Usage

import React from "react";
import { Chip } from "chip";
import { ReactComponent as Delete } from "./icons/Delete.svg";

const ChipViewer = () => {
	return (
		<div>
			<div
				style={{
					padding: "1.25rem",
					display: "grid",
					gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr",
					justifyItems: "start",
					alignContent: "flex-start",
					alignItems: "center",
					gap: "0.625rem",
				}}
			>
				<h5 className="btn-viewer-title">Basic chip</h5>
				<h5 className="btn-viewer-title">Badge Chip</h5>
				<h5 className="btn-viewer-title">Deletable Chip </h5>
				<h5 className="btn-viewer-title">Deletable Chip With Badge</h5>
				<h5 className="btn-viewer-title">
					Deletable Chip With Badge with Char limit
				</h5>
				<h5 className="btn-viewer-title">Small Basic Chip</h5>
				<h5 className="btn-viewer-title">Small Badge Chip</h5>
				<Chip
					title="Chip text"
					style={{
						color: "#2F3446",
						borderColor: "#6A6A6A",
						hoverBg: "#FCE5F1",
						focusBg: "#FCE5F1",
						background: "#FFFFFF",
					}}
					iconPosition="left"
					onClick={(e) => {
						console.log(e);
					}}
				/>
        </div>
	);
};

export default ChipViewer;

Props

• title: A string that specifies the text to be displayed in the chip.
• disable: A boolean that specifies whether the chip is disabled. If true, the chip will be disabled.
• icon: An optional prop that specifies an icon to be displayed in the chip. This can be a single node or an array of nodes.
• customCloseButton: An optional prop that specifies a custom close button to be displayed in the chip. This can be a single node or an array of nodes.
• iconPosition: An optional string that specifies the position of the icon in the chip. The possible values are: "left" and "right". If not provided, the icon will be displayed on the left.
• style: An optional object that specifies the style of the chip.
• onCloseClick: A required function that is called when the close button is clicked.
• onChipClick: A function that is called when the chip is clicked.
• type: An optional string that specifies the type of the chip. The possible value is: "small". If not provided, the chip will have the default size.

Props (table)

License

MIT ©