> ## 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.

# Bloc de pictogramă nuanțată

> O pictogramă pe un fundal nuanțat derivat dintr-o culoare a temei.

## Prezentare generală

Transmiteți conținutul pictogramei prin slotul de nod `icon` cu litere mici. Dala își preia culoarea de fundal și culoarea moștenită de prim-plan din paleta temei. Conținutul pictogramei este decorativ. Păstrați o etichetă vizibilă lângă aceasta sau atribuiți rădăcinii `role="img"` și un nume accesibil pentru o imagine etichetată independentă.

**Light**

[Pictograma companiei pe o dală nuanțată (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-tintedicontile--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Pictograma companiei pe o dală nuanțată (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)

## Utilizare

```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>
);
```

## Geometrie și compoziție nativă

Dala are implicit 16px prin tokenul de spațiere și utilizează tokenul mic pentru raza bordurii. Setați dimensiunile și conturul pictogramei direct pe nod. `style` sau `className` de pe rădăcină controlează lățimea, înălțimea, bordura, forma și culorile dalei; stilurile explicite înlocuiesc valorile implicite ale paletei. Grafica personalizată trebuie să moștenească `currentColor` atunci când utilizează culoarea de prim-plan a paletei.

```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 }}
  />
);
```

Atributele native, evenimentele, `className`, `style` și `ref` vizează elementul div exterior. `render` înlocuiește acea țintă prin compunerea Base UI, păstrând în același timp conținutul decorativ al pictogramei. Denumiți controlul înconjurător atunci când compuneți o dală într-o acțiune.

Înlocuiți `Icon={CompanyIcon}` cu `icon={<CompanyIcon size={16} />}`. Mutați opțiunile anterioare `size` și `stroke` în nodul pictogramei și utilizați stiluri pe rădăcină pentru dimensiuni personalizate ale dalei.

## Proprietăți

**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.