lucid-ui/dist/esm/components/Tag/Tag.d.ts

A UI component library from Xandr.

import React from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
export interface ITagProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    /** Set this prop if you're using three levels of tags so it can be styled
        appropriately. This is required because we aren't able to know if your
        Tags have grand children efficiently. */
    isTop: boolean;
    /** Use the light background when your tags are on a white page background.
        Use a dark background when your tags need to be placed on a darker
        background (e.g. in a page header). */
    hasLightBackground: boolean;
    /** Shows or hides the little "x" for a given tag. */
    isRemovable: boolean;
    /** Style variations of the `Tag`. */
    kind?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default';
    /** Called when the user clicks to remove a tag. */
    onRemove: ({ props, event, }: {
        props: ITagProps;
        event: React.MouseEvent;
    }) => void;
}
export declare const Tag: {
    (props: ITagProps): React.ReactElement;
    defaultProps: {
        isTop: boolean;
        hasLightBackground: boolean;
        isRemovable: boolean;
        kind: "default";
        onRemove: (...args: any[]) => void;
    };
    displayName: string;
    peek: {
        description: string;
        notes: {
            overview: string;
            intendedUse: string;
            technicalRecommendations: string;
        };
        categories: string[];
    };
    propTypes: {
        /**
            Set this prop if you're using three levels of tags so it can be styled
            appropriately. This is required because we aren't able to know if your
            Tags have grand children efficiently.
        */
        isTop: PropTypes.Requireable<boolean>;
        /**
            Use the light background when your tags are on a white page background.
            Use a dark background when your tags need to be placed on a darker
            background (e.g. in a page header).
        */
        hasLightBackground: PropTypes.Requireable<boolean>;
        /**
            Shows or hides the little "x" for a given tag.
        */
        isRemovable: PropTypes.Requireable<boolean>;
        /**
            Style variations of the \`Tag\`.
        */
        kind: PropTypes.Requireable<string>;
        /**
            Called when the user clicks to remove a tag.  Signature:
            \`({props, event}) => {}\`
        */
        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Can contain elements or nested \`Tag\` components.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Appended to the component-specific class names set on the root element.
        */
        className: PropTypes.Requireable<string>;
    };
};
export default Tag;
//# sourceMappingURL=Tag.d.ts.map