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

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2019, 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 HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
export interface TileProps extends HTMLAttributes<HTMLDivElement> {
    children?: ReactNode;
    className?: string;
    /**
     * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
     */
    decorator?: ReactNode;
    /** @deprecated */
    light?: boolean;
    /**
     * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
     * when an AILabel is present
     */
    hasRoundedCorners?: boolean;
    /**
     * @deprecated please use `decorator` instead.
     * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
     */
    slug?: ReactNode;
}
export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>>;
export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
    children?: ReactNode;
    className?: string;
    /**
     * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
     */
    decorator?: boolean | ReactNode;
    /** @deprecated */
    light?: boolean;
    /**
     * Boolean for whether a tile has been clicked.
     */
    clicked?: boolean;
    /**
     * Specify whether the ClickableTile should be disabled
     */
    disabled?: boolean;
    /**
     * **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
     * Only valid when `slug` prop is present
     */
    hasRoundedCorners?: boolean;
    /**
     * The href for the link.
     */
    href?: string;
    /**
     * A component used to render an icon.
     */
    renderIcon?: React.ElementType;
    /**
     * Specify the function to run when the ClickableTile is clicked
     */
    onClick?(event: MouseEvent): void;
    /**
     * Specify the function to run when the ClickableTile is interacted with via a keyboard
     */
    onKeyDown?(event: KeyboardEvent): void;
    /**
     * The rel property for the link.
     */
    rel?: string;
    /**
     * @deprecated please use `decorator` instead.
     * **Experimental**: Specify if a `Slug` icon should be rendered inside the `ClickableTile`
     */
    slug?: boolean;
}
export declare const ClickableTile: React.ForwardRefExoticComponent<ClickableTileProps & React.RefAttributes<HTMLAnchorElement>>;
export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
    children?: ReactNode;
    className?: string;
    /**
     * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
     */
    decorator?: ReactNode;
    /** @deprecated */
    light?: boolean;
    /**
     * Specify whether the SelectableTile should be disabled
     */
    disabled?: boolean;
    /**
     * **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
     * Only valid when `slug` prop is present
     */
    hasRoundedCorners?: boolean;
    /**
     * The ID of the `<input>`.
     */
    id?: string;
    /**
     * The `name` of the `<input>`.
     * @deprecated
     */
    name?: string;
    /**
     * The empty handler of the `<input>`.
     */
    onChange?(event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>, selected?: boolean, id?: string): void;
    /**
     * Specify the function to run when the SelectableTile is clicked
     */
    onClick?(event: MouseEvent<HTMLDivElement>): void;
    /**
     * Specify the function to run when the SelectableTile is interacted with via a keyboard
     */
    onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void;
    /**
     * `true` to select this tile.
     */
    selected?: boolean;
    /**
     * @deprecated please use `decorator` instead.
     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
     */
    slug?: ReactNode;
    /**
     * Specify the tab index of the wrapper element
     */
    tabIndex?: number;
    /**
     * The `title` of the `<input>`.
     */
    title?: string;
    /**
     * The value of the `<input>`.
     * @deprecated
     */
    value?: string | number;
}
export declare const SelectableTile: React.ForwardRefExoticComponent<SelectableTileProps & React.RefAttributes<HTMLDivElement>>;
export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
    children?: ReactNode;
    className?: string;
    /**
     * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
     */
    decorator?: ReactNode;
    /** @deprecated */
    light?: boolean;
    /**
     * `true` if the tile is expanded.
     */
    expanded?: boolean;
    /**
     * **Experimental**: Specify if the `ExpandableTile` component should be rendered with rounded corners.
     * Only valid when `slug` prop is present
     */
    hasRoundedCorners?: boolean;
    /**
     * An ID that can be provided to aria-labelledby
     */
    id?: string;
    /**
     * Specify the function to run when the ExpandableTile is clicked
     */
    onClick?(event: MouseEvent): void;
    /**
     * optional handler to trigger a function when a key is pressed
     */
    onKeyUp?(event: KeyboardEvent): void;
    /**
     * @deprecated please use `decorator` instead.
     * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
     */
    slug?: ReactNode;
    /**
     * The `tabindex` attribute.
     */
    tabIndex?: number;
    /**
     * The description of the "collapsed" icon that can be read by screen readers.
     */
    tileCollapsedIconText?: string;
    /**
     * When "collapsed", a label to appear next to the chevron (e.g., "View more").
     */
    tileCollapsedLabel?: string;
    /**
     * The description of the "expanded" icon that can be read by screen readers.
     */
    tileExpandedIconText?: string;
    /**
     * When "expanded", a label to appear next to the chevron (e.g., "View less").
     */
    tileExpandedLabel?: string;
    tileMaxHeight?: number;
    tilePadding?: number;
}
export declare const ExpandableTile: React.ForwardRefExoticComponent<ExpandableTileProps & React.RefAttributes<HTMLElement>>;
export interface TileAboveTheFoldContentProps {
    /**
     * The child nodes.
     */
    children?: ReactNode;
}
export declare const TileAboveTheFoldContent: React.ForwardRefExoticComponent<TileAboveTheFoldContentProps & React.RefAttributes<HTMLDivElement>>;
export interface TileBelowTheFoldContentProps {
    /**
     * The child nodes.
     */
    children?: ReactNode;
}
export declare const TileBelowTheFoldContent: React.ForwardRefExoticComponent<TileBelowTheFoldContentProps & React.RefAttributes<HTMLDivElement>>;