> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Плитка значка с оттенком

> Значок на тонированном фоне, производном от цвета темы.

## Обзор

Передавайте содержимое значка через слот узла `icon` в нижнем регистре. Плитка получает цвет фона и наследуемый основной цвет из палитры темы. Содержимое значка является декоративным. Сохраните рядом с ним видимую метку или задайте для корневого элемента `role="img"` и доступное имя для отдельного изображения с меткой.

**Light**

[Значок компании на тонированной плитке (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-tintedicontile--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Значок компании на тонированной плитке (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-tintedicontile--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-data-display-tintedicontile--display)

## Использование

```tsx theme={null}
import { TintedIconTile } from 'twenty-ui/components/data-display';
import { IconBuildingSkyscraper } from 'twenty-ui/icon';
import { Text } from 'twenty-ui/primitives/typography';

export const CompanyLabel = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <TintedIconTile icon={<IconBuildingSkyscraper size={16} />} color="blue" />
    <Text>Companies</Text>
  </Text>
);
```

## Геометрия и нативная композиция

По умолчанию размер плитки составляет 16px благодаря токену интервалов, а также используется малый токен радиуса границы. Задайте размеры и обводку значка непосредственно на самом узле. Корневые `style` или `className` управляют шириной, высотой, границей, формой и цветами плитки; явные стили переопределяют значения палитры по умолчанию. Пользовательская графика должна наследовать `currentColor`, когда использует основной цвет палитры.

```tsx theme={null}
import { TintedIconTile } from 'twenty-ui/components/data-display';

export const CustomCompanyTile = () => (
  <TintedIconTile
    icon={
      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path d="M2 2h16v16H2z" />
      </svg>
    }
    color="blue"
    role="img"
    aria-label="Companies"
    render={<span />}
    style={{ width: 32, height: 32 }}
  />
);
```

Нативные атрибуты, события, `className`, `style` и `ref` применяются к внешнему div. `render` заменяет этот целевой элемент через композицию Base UI, сохраняя декоративное содержимое значка. При включении плитки в действие задайте имя окружающему элементу управления.

Замените `Icon={CompanyIcon}` на `icon={<CompanyIcon size={16} />}`. Перенесите прежние параметры `size` и `stroke` в узел значка и используйте корневые стили для пользовательских размеров плитки.

## Свойства

**className** `string`

CSS class applied to the tile root.

**color** `string | null` (default: gray)

Theme palette name used to derive the background and foreground shades. Invalid names use the default theme color.

**icon** `ReactNode` *required*

Decorative icon content. The caller controls its dimensions and stroke.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the div root while preserving icon content and native props.

**style** `CSSProperties`

Inline styles override tile geometry and palette defaults.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.