@syncfusion/react-buttons/src/chip/chip.d.ts

Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.

import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes, type MouseEvent, type KeyboardEvent } from 'react';
import { Size } from '@syncfusion/react-base';
export { Size };
/**
 * Represents the variant types for the Chip component.
 */
export type ChipVariant = 'Filled' | 'Outlined';
/**
 * Represents the color types for the Chip component.
 */
export type ChipColor = 'Primary' | 'Info' | 'Error' | 'Success' | 'Warning';
/**
 * Represents the model for the Chip component.
 *
 */
export interface ChipBaseProps {
    /**
     * Specifies the text content for the Chip.
     *
     * @default -
     */
    text?: string;
    /**
     * Defines the value of the Chip.
     *
     * @default -
     */
    value?: string | number;
    /**
     * Specifies the icon CSS class or React node for the avatar in the Chip.
     *
     * @default -
     */
    avatar?: ReactNode;
    /**
     * Specifies the leading icon CSS class or React node for the Chip.
     *
     * @default -
     */
    leadingIcon?: ReactNode;
    /**
     * Specifies the trailing icon CSS or React node for the Chip.
     *
     * @default -
     */
    trailingIcon?: ReactNode;
    /**
     * Specifies whether the Chip component is disabled or not.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Specifies the leading icon url for the Chip.
     *
     * @default -
     */
    leadingIconUrl?: string;
    /**
     * Specifies the trailing icon url for the Chip.
     *
     * @default -
     */
    trailingIconUrl?: string;
    /**
     * Specifies whether the Chip is removable.
     *
     * @default false
     */
    removable?: boolean;
    /**
     * Specifies the variant of the Chip, either 'filled' or 'outlined'.
     *
     * @default 'filled'
     */
    variant?: ChipVariant;
    /**
     * Specifies the color of the Chip, one of 'Primary', 'Info', 'Error', 'Success', or 'Warning'.
     *
     * @default -
     */
    color?: ChipColor;
    /**
     * Specifies the icon element to indicate the chip’s selected state.
     * When provided, replaces the default selection indicator.
     *
     * @default -
     */
    selectIcon?: ReactNode;
    /**
     * Specifies the icon element to render for the chip's remove action.
     * When provided, replaces the default close/remove icon.
     *
     * @default -
     */
    removeIcon?: ReactNode;
    /**
     * Specifies the size of the Chip. Options include 'Small', 'Medium' and 'Large'.
     *
     * @default Size.Medium
     */
    size?: Size;
}
/**
 * Represents the props for the Chip component.
 *
 * @ignore
 */
export interface ChipProps extends ChipBaseProps {
    /**
     * Event handler for the delete action.
     *
     * @event onDelete
     */
    onDelete?: (event: ChipDeleteEvent) => void;
}
/**
 * Represents the arguments for the delete event of a Chip.
 */
export interface ChipDeleteEvent {
    /**
     * Specifies the data associated with the deleted Chip.
     */
    data: ChipBaseProps;
    /**
     * Specifies the event that triggered the delete action.
     */
    event: MouseEvent | KeyboardEvent;
}
/**
 * Represents the interface for the Chip component.
 */
export interface IChip extends ChipProps {
    /**
     * Specifies the Chip component element.
     *
     * @private
     */
    element?: HTMLDivElement | null;
}
type ChipComponentProps = ChipProps & HTMLAttributes<HTMLDivElement>;
/**
 * The Chip component represents information in a compact form, such as entity attribute, text, or action.
 *
 * ```typescript
 * import { Chip } from "@syncfusion/react-buttons";
 *
 * <Chip color="Primary" removable={true}>Anne</Chip>
 * ```
 */
export declare const Chip: ForwardRefExoticComponent<ChipComponentProps & RefAttributes<IChip>>;
export default Chip;