@carbon/react/es/components/Tag/Tag.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { type ReactNode } from 'react';
import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
import { SelectableTagBaseProps } from './SelectableTag';
import { OperationalTagBaseProps } from './OperationalTag';
import { DismissibleTagBaseProps } from './DismissibleTag';
export declare const TYPES: {
    red: string;
    magenta: string;
    purple: string;
    blue: string;
    cyan: string;
    teal: string;
    green: string;
    gray: string;
    'cool-gray': string;
    'warm-gray': string;
    'high-contrast': string;
    outline: string;
};
export declare const SIZES: {
    sm: string;
    md: string;
    lg: string;
};
export interface TagBaseProps {
    /**
     * Provide content to be rendered inside of a `Tag`
     */
    children?: React.ReactNode;
    /**
     * Provide a custom className that is applied to the containing <span>
     */
    className?: string;
    /**
     * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
     */
    decorator?: ReactNode;
    /**
     * Specify if the `Tag` is disabled
     */
    disabled?: boolean;
    /**
     * @deprecated The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
     */
    filter?: boolean;
    /**
     * Specify the id for the tag.
     */
    id?: string;
    /**
     * @deprecated The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
     */
    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    /**
     * A component used to render an icon.
     */
    renderIcon?: React.ElementType;
    /**
     * Specify the size of the Tag. Currently supports either `sm`,
     * `md` (default) or `lg` sizes.
     */
    size?: keyof typeof SIZES;
    /**
     * @deprecated please use `decorator` instead.
     * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
     */
    slug?: ReactNode;
    /**
     * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
     */
    title?: string;
    /**
     * Specify the type of the `Tag`
     */
    type?: keyof typeof TYPES;
}
export type TagProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TagBaseProps>;
type TagComponent = <T extends React.ElementType = 'div'>(props: TagProps<T> | OperationalTagBaseProps | SelectableTagBaseProps | DismissibleTagBaseProps) => React.ReactElement | any;
declare const Tag: TagComponent;
export declare const types: string[];
export default Tag;