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

# Scheletro

> Mostra forme segnaposto a tema durante il caricamento dei contenuti.

## Panoramica

`Skeleton` fornisce una forma segnaposto con i colori del tema e un'evidenziazione in movimento. Componi le forme nel layout del contenuto in caricamento. L'applicazione gestisce lo stato di caricamento e i layout specifici della funzionalità.

**Light**

[Forme dello scheletro (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-skeleton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Forme dello scheletro (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-skeleton--display\&viewMode=story\&globals=colorScheme:dark)

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

## Utilizzo

```tsx theme={null}
import { Skeleton, SKELETON_HEIGHT_SIZES } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

export const LoadingProfile = () => (
  <Text render={<div />} style={{ display: 'flex', gap: 16 }}>
    <Skeleton width={40} height={40} borderRadius="50%" />
    <Text
      render={<div />}
      style={{ display: 'flex', flexDirection: 'column', gap: 8 }}
    >
      <Skeleton width={180} height={SKELETON_HEIGHT_SIZES.s} />
      <Skeleton width={120} height={SKELETON_HEIGHT_SIZES.xs} />
    </Text>
  </Text>
);
```

Skeleton viene visualizzato come un blocco e non diventa mai più largo del suo contenitore. Usa `layout="inline"` per inserire un segnaposto all'interno di una riga di testo.

Le dimensioni numeriche usano i pixel. Sono supportate anche le lunghezze CSS come le percentuali e `em`. Senza dimensioni, il segnaposto riempie la larghezza disponibile e usa l'altezza del carattere ereditata. Usa dimensioni uguali e `borderRadius="50%"` per un cerchio.

`SKELETON_HEIGHT_SIZES` fornisce altezze condivise per `xs` (13px), `s` (16px), `m` (24px), `l` (32px) e `xl` (40px). Mantieni nell'applicazione le dimensioni specifiche del layout.

Ogni `Skeleton` visualizza un segnaposto. Mantieni le righe ripetute, la spaziatura delle righe di testo e le aree di caricamento nei componenti dell'applicazione che racchiudono il primitivo.

## Movimento e accessibilità

Gli skeleton sono decorativi e per impostazione predefinita hanno `aria-hidden="true"`. Mantieni gli annunci di caricamento in una regione di stato gestita dall'host invece di annunciare ogni forma. Skeleton non accetta elementi figlio.

L'evidenziazione si sposta da sinistra a destra in un ciclo ease-in-out di 1,5 secondi ed è nascosta quando l'utente preferisce il movimento ridotto. Passa `animated={false}` per un segnaposto statico.

**Light**

[Skeleton statico (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-skeleton--static\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Skeleton statico (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-skeleton--static\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-skeleton--static)

## Composizione e tema

Le props native, `className`, `style` e `ref` hanno come destinazione lo span del segnaposto. Usa `render` per comporre un altro elemento. Gli stili nativi espliciti sovrascrivono le props di dimensione e colore.

Per impostazione predefinita, i colori di base e di evidenziazione corrispondono allo sfondo terziario del tema e a uno sfondo trasparente più chiaro. Usa `baseColor`, `highlightColor` e `borderRadius` per sovrascriverli. Gli angoli rimangono arrotondati, anche quando il tema usa gli squircles. Il raggio predefinito utilizza il token del tema `smRound` (4px). Passa `themeCssVariables.border.radius.mdRound` da `twenty-ui/theme` per angoli di 8px. I raggi personalizzati in pixel e CSS rimangono supportati, inclusi `borderRadius={80}` per una capsula stretta e `borderRadius="50%"` per un cerchio. Dopo aver caricato `twenty-ui/style.css` e il tema dell'interfaccia utente, non è necessario alcun provider specifico per Skeleton né alcuna importazione di fogli di stile.

## Props

**animated** `boolean` (default: true)

Animate the highlight by default. Reduced-motion preferences always disable animation.

**aria-hidden** `Booleanish`

Placeholders are decorative and hidden from assistive technology by default. The host owns loading announcements.

**baseColor** `BackgroundColor`

Placeholder background color. Defaults to the theme tertiary background.

**borderRadius** `BorderRadius\<string | number\>`

Round corner radius in pixels or a CSS length. Defaults to the 4px smRound theme token. Use mdRound for 8px corners or a custom radius for circles and capsules.

**className** `string`

CSS class merged with the placeholder class.

**height** `Height\<string | number\>`

Placeholder height in pixels or a CSS length. Defaults to the inherited font height.

**highlightColor** `BackgroundColor`

Animated highlight color. Defaults to the theme lighter transparent background.

**layout** `"block" | "inline"` (default: block)

`block` renders a block without a text node. `inline` sizes and aligns the placeholder like a line of text.

**ref** `Ref\<HTMLSpanElement\>`

Ref to the placeholder span, or the element supplied through render.

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

Element or render callback composed through Base UI useRender.

**style** `CSSProperties`

Native styles merged with the placeholder dimensions and colors. Explicit styles win.

**width** `Width\<string | number\>`

Placeholder width in pixels or a CSS length. Defaults to the available width and never exceeds the container.


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