Badges
Chip

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"];
};