Chip
Dismissable and interactive tag elements.
Anatomy
import { Chip } from "@lualtek/react-components";
export default () => {
return <Chip>Text</Chip>;
};
API Reference
export type ChipProps = {
/**
* Set the dimension of the component.
* @default 'regular'
*/
dimension?: "small" | "regular" | "big";
/**
* Set a color from one of the provided values.
* @default 'gray'
*/
color?: TokensTypes["colors"];
/**
* Make the chip dismissable. When `true` adds a close button on the side.
*/
dismissable?: boolean;
/**
* Turn the chip into a button to add interactions like popovers or custom actions.
*/
interactive?: boolean;
/**
* Callback function to be called when the dismiss button is pressed.
*/
onDismissClick?: () => void;
/**
* Show an icon before the chip content.
* @important The icon is not rendered if `dismissable` is `true`
*/
icon?: IconProps["source"];
};