@itwin/itwinui-react/esm/core/List/ListItem.d.ts

A react component library for iTwinUI

import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
export type ListItemOwnProps = {
    /**
     * Size of the ListItem. Can be explicitly specified to be 'large',
     * but if a description is included in addition to the label, then
     * it will automatically become large.
     */
    size?: 'default' | 'large';
    /**
     * If true, the ListItem has disabled (dimmed) styling.
     */
    disabled?: boolean;
    /**
     * If true, the ListItem has active (selected) styling.
     */
    active?: boolean;
    /**
     * If true, the ListItem will get actionable styling, such as hover styling and cursor.
     */
    actionable?: boolean;
    /**
     * If true, the ListItem has focus styling.
     *
     * By default, focus styling is automatically applied if the item is
     * focused, or if the item contains a `LinkAction` and it is focused.
     * This prop is useful for custom focus management (e.g. using `aria-activedescendant`).
     */
    focused?: boolean;
};
/**
 * A generic ListItem component that can be used simply for displaying data, or as a base
 * for the list items in a more complex component (e.g. a custom Select).
 *
 * Includes support for left/right icons, multiple lines of text, and hover/focus/active/disabled styling.
 *
 * @example
 * <List>
 *   <ListItem>item 1</ListItem>
 *   <ListItem>item 2</ListItem>
 *   <ListItem>item 3</ListItem>
 * </List>
 */
export declare const ListItem: PolymorphicForwardRefComponent<"div", ListItemOwnProps> & {
    /**
     * Icon to be placed at the beginning or end of the ListItem.
     */
    Icon: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * Wrapper for the main content of the ListItem.
     *
     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
     * - When using an end icon. The `ListItem.Content` will fill the available space
     *   and push the icon to the end
     * - When using `ListItem.Description`.
     */
    Content: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * Description to be used in addition to the main label of the ListItem.
     * Should be used as a child of `ListItem.Content`.
     *
     * @example
     * <ListItem>
     *  <ListItem.Content>
     *   <div>some list item</div>
     *   <ListItem.Description>description for this item</ListItem.Description>
     *  </ListItem.Content>
     * </ListItem>
     */
    Description: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
     * This ensures that clicking anywhere on the ListItem will trigger the link.
     *
     * @example
     * <ListItem>
     *  <ListItem.Action href='https://example.com'>Example link</ListItem.Action>
     * </ListItem>
     */
    Action: PolymorphicForwardRefComponent<"a", {}>;
};