@primer/react-brand/lib/Tiles/Tiles.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import type { BaseProps } from '../component-helpers';
/** * Design Tokens */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css';
type TilesVariant = 'default' | 'gridlines';
type TilesLayout = 'default' | 'compact';
export type TilesProps = {
    /**
     * The visual variant of the Tiles component.
     */
    variant?: TilesVariant;
    /**
     * The layout density of the Tiles grid.
     */
    layout?: TilesLayout;
    /**
     * Test id for the root Tiles element.
     */
    'data-testid'?: string;
} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
export type TilesItemProps = {
    /**
     * The accessible name for the tile item.
     */
    name: string;
    /**
     * Optional URL to link the tile to.
     */
    href?: string;
    /**
     * Test id for the tile item element.
     */
    'data-testid'?: string;
} & BaseProps<HTMLLIElement> & Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {
    children: React.ReactNode;
};
/**
 * Use Tiles to display a grid of logos or icons with optional links.
 * @see https://primer.style/brand/components/Tiles
 */
export declare const Tiles: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TilesProps>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
    Item: React.ForwardRefExoticComponent<Omit<TilesItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
    testIds: {
        root: string;
        readonly grid: string;
        readonly item: string;
    };
};
export {};