@cbinsights/fds/lib/components/Chip/index.d.ts

Form: A design system by CB Insights

import React, { HTMLAttributes } from 'react';
import Icon from 'components/Icon';
export declare const THEMES: readonly ["blue", "gray", "outline"];
export declare const SIZES: readonly ["s", "m"];
export interface ChipProps extends HTMLAttributes<HTMLElement | HTMLButtonElement | HTMLAnchorElement> {
    /**
     * Text that appears in the button
     */
    label: string;
    /** Controls the color (look and feel) of the chip */
    theme?: typeof THEMES[number];
    /** Specify the size of the chip */
    size?: typeof SIZES[number];
    /** Controls the isActive state of the chip, which changes colors */
    isActive?: boolean;
    /**  Pass in "only" a FDS Icon reference to display it (e.g. Icon={ApproveIcon}) */
    Icon?: Icon;
    /** Text that appears to the right of the label */
    subtitle?: string;
    /**
     * onClick handler for close icon  (By passing this onClick handler, the close icon
     * will automatically appear)
     */
    onClose?: React.ReactEventHandler;
    /**
     * Takes in a react-router `Link` reference and sets it
     * as the base element. You may ONLY use it like the
     * following:
     *
     * - `import { Link } from 'react-router'`
     * - `Link={Link}`
     */
    Link?: React.ComponentType;
    href?: string;
}
declare const Chip: ({ size, theme, Link, Icon, isActive, label, subtitle, onClose, ...rest }: ChipProps) => JSX.Element;
export default Chip;