---
title: "Widgets y mini-widgets"
slug: "widgets-und-mini-widgets"
category: "Introducción"
locale: "es"
order: 2
description: "Interfaces de negocio completas frente a piezas pequeñas — y cómo combinarlas entre sí."
reactExample: "layout.tsx"
hosts: "react"
---

# Widgets y mini-widgets en React

El paquete de React incluye ocho widgets premium para interfaces más grandes y 14 mini-widgets para entrada de datos, presentación y layout. Ambos grupos se importan del mismo paquete.

## Widgets premium

Table, Kanban, tres vistas de calendario, Drawing, Upload y Slideshow cubren listas, planificación, dibujos, carga de archivos y presentación. Para el uso productivo se aplican las condiciones de la licencia de proyecto.

## Mini-widgets

Button, Badge, Input, Select, Signature, Icon, Text, Progress Bar, Layout, Numpad, Slider, Steps, KPI Bar y DevTools son piezas más pequeñas. Puedes usarlos de forma independiente o en los slots de contenido de widgets más grandes.

## Combinar widgets

```tsx
import {
  ArcWidgetBadge,
  ArcWidgetButton,
  ArcWidgetLayout,
  ArcWidgetText,
} from '@arcrider/arcwidgets-react';
import { useState } from 'react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const requested = new URLSearchParams(location.search).get('data');
const pack = requested === 'empty' || requested === 'busy' ? requested : 'demo';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

export default function Example() {
  const [count, setCount] = useState(pack === 'busy' ? 12 : 0);
  const badges =
    pack === 'empty'
      ? []
      : [
          { value: t('Offen', 'Open', 'Abierto'), color: '#d97706' },
          { value: t('Live', 'Live', 'En vivo'), color: '#15803d' },
          ...(pack === 'busy'
            ? [
                {
                  value: t('Priorität', 'Priority', 'Prioridad'),
                  color: '#be123c',
                },
                { value: t('Messe', 'Fair', 'Feria'), color: '#7c3aed' },
              ]
            : []),
        ];
  return (
    <ArcWidgetLayout
      id="layout"
      data={{
        embedded: false,
        height: '240px',
        direction: 'vertical',
        gap: '12px',
        blocks: [
          {
            height: 'auto',
            value: (
              <ArcWidgetText
                data={{
                  value: `${t('Klicks', 'Clicks', 'Clics')}: ${count}`,
                  fontSize: '20px',
                }}
              />
            ),
          },
          ...(badges.length
            ? [
                {
                  height: 'auto' as const,
                  value: (
                    <ArcWidgetLayout
                      data={{
                        embedded: true,
                        direction: 'horizontal',
                        gap: '8px',
                        height: 'auto',
                        blocks: badges.map((badge) => ({
                          width: 'auto',
                          height: 'auto',
                          value: (
                            <ArcWidgetBadge
                              data={{
                                value: badge.value,
                                singleColor: badge.color,
                                borderRadius: '6px',
                                paddingX: '10px',
                                paddingY: '4px',
                              }}
                            />
                          ),
                        })),
                      }}
                    />
                  ),
                },
              ]
            : []),
          {
            height: 'fraction',
            value: (
              <ArcWidgetButton
                data={{
                  title: t('Weiter', 'Continue', 'Continuar'),
                  width: '160px',
                  backgroundColor: '#18181b',
                  fontColor: '#ffffff',
                }}
                onClick={() => setCount((value) => value + 1)}
              />
            ),
          },
        ],
      }}
    />
  );
}
```

En React, los slots compatibles se pueden rellenar directamente con JSX. Así los callbacks de componentes anidados permanecen en tu state. El Slideshow es una excepción: sus slides usan actualmente contenido de tipo string.

[Resumen de componentes con todas las referencias](/docs/react/intro/react-components) · [JSX y descriptores](/docs/react/patterns/nested-widget-descriptors) · [Licenciamiento](/docs/react/faq/react-paket-und-lizenzierung).