@coreui/react/dist/esm/components/chip/CChip.d.ts

UI Components Library for React.js

import { ElementType, HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from 'react';
import { PolymorphicRefForwardingComponent } from '../../helpers';
import type { Colors } from '../../types';
export interface CChipProps extends HTMLAttributes<HTMLSpanElement | HTMLButtonElement> {
    /**
     * Toggles the active state of the React Chip component for non-selectable usage.
     */
    active?: boolean;
    /**
     * Provides an accessible label for the remove button in the React Chip component.
     */
    ariaRemoveLabel?: string;
    /**
     * Specifies the root element or custom component used by the React Chip component.
     */
    as?: ElementType;
    /**
     * Adds custom classes to the React Chip root element.
     */
    className?: string;
    /**
     * Enables interactive hover styling and pointer cursor for the React Chip component.
     */
    clickable?: boolean;
    /**
     * Sets the contextual color of the React Chip component using CoreUI theme colors.
     *
     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
     */
    color?: Colors;
    /**
     * Disables the React Chip component and removes interactive behavior.
     */
    disabled?: boolean;
    /**
     * Callback fired when the React Chip component becomes deselected.
     */
    onDeselect?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
    /**
     * Callback fired when the React Chip component requests removal by button click or keyboard action.
     */
    onRemove?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLElement>) => void;
    /**
     * Callback fired when the React Chip component becomes selected.
     */
    onSelect?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
    /**
     * Callback fired when the selected state of the React Chip component changes.
     */
    onSelectedChange?: (selected: boolean, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
    /**
     * Displays a remove button inside the React Chip component.
     */
    removable?: boolean;
    /**
     * Replaces the default remove icon with a custom icon node in the React Chip component.
     */
    removeIcon?: ReactNode;
    /**
     * Enables selectable behavior and keyboard toggle support for the React Chip component.
     */
    selectable?: boolean;
    /**
     * Controls the selected state of a selectable React Chip component.
     */
    selected?: boolean;
    /**
     * Sets the size of the React Chip component to small or large.
     */
    size?: 'sm' | 'lg';
    /**
     * Sets the visual variant of the React Chip component to outline style.
     */
    variant?: 'outline';
}
export declare const CChip: PolymorphicRefForwardingComponent<'span', CChipProps>;