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

# Esqueleto

> Muestra formas de marcador de posición con tema mientras se carga el contenido.

## Resumen

`Skeleton` proporciona una forma de marcador de posición con colores de tema y un resaltado en movimiento. Compón formas con el diseño del contenido que se está cargando. La aplicación controla el estado de carga y los diseños específicos de cada funcionalidad.

**Light**

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

**Dark**

[Formas de esqueleto (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)

## "Uso"

```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 se representa como un bloque y nunca crece más que su contenedor. Usa `layout="inline"` para colocar un marcador de posición dentro de una línea de texto.

Las dimensiones numéricas usan píxeles. También se admiten longitudes CSS, como porcentajes y `em`. Sin dimensiones, el marcador de posición ocupa el ancho disponible y usa la altura de fuente heredada. Use dimensiones iguales y `borderRadius="50%"` para un círculo.

`SKELETON_HEIGHT_SIZES` proporciona alturas compartidas para `xs` (13px), `s` (16px), `m` (24px), `l` (32px) y `xl` (40px). Mantenga las dimensiones específicas del diseño en la aplicación.

Cada `Skeleton` representa un marcador de posición. Mantenga las líneas repetidas, el espaciado entre líneas de texto y las regiones de carga en componentes de la aplicación que encapsulen el elemento primitivo.

## Movimiento y accesibilidad

Los esqueletos son decorativos y tienen `aria-hidden="true"` de forma predeterminada. Mantenga los anuncios de carga en una región de estado propiedad del host en lugar de anunciar cada forma. Skeleton no acepta elementos secundarios.

El resaltado se mueve de izquierda a derecha en un bucle de entrada y salida suave de 1,5 segundos y se oculta cuando el usuario prefiere movimiento reducido. Pase `animated={false}` para un marcador de posición estático.

**Light**

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

**Dark**

[Esqueleto estático (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)

## Composición y tema

Las props nativas, `className`, `style` y `ref` se aplican al span del marcador de posición. Use `render` para componer otro elemento. Los estilos nativos explícitos anulan las props de dimensión y color.

Los colores base y de resaltado usan de forma predeterminada el fondo terciario del tema y un fondo transparente más claro. Use `baseColor`, `highlightColor` y `borderRadius` para anularlos. Las esquinas se mantienen redondeadas, incluso cuando el tema usa superelipses. El radio predeterminado usa el token de tema `smRound` (4px). Pase `themeCssVariables.border.radius.mdRound` de `twenty-ui/theme` para esquinas de 8px. Los radios personalizados en píxeles y CSS siguen siendo compatibles, incluidos `borderRadius={80}` para una cápsula estrecha y `borderRadius="50%"` para un círculo. No se necesita ningún proveedor específico de skeleton ni importar una hoja de estilos después de cargar `twenty-ui/style.css` y el tema de la interfaz de usuario.

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