---
title: "Button"
slug: "buttons"
category: "Mini Widgets"
reactComponent: "ArcWidgetButton"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "button.tsx"
locale: "es"
hosts: "react"
---

# Button en React

Dispara una acción y muestra un estado de carga durante un proceso asíncrono.

Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

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

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

export default function Example() {
  const [status, setStatus] = useState(t('Bereit', 'Ready', 'Listo'));
  return (
    <>
      <ArcWidgetButton
        id="save"
        data={{
          title: t('Speichern', 'Save', 'Guardar'),
          width: '160px',
          backgroundColor: '#18181b',
          fontColor: '#ffffff',
          loading: {
            show: true,
            minDuration: 300,
          },
        }}
        onClick={async () => {
          setStatus(t('Speichert …', 'Saving …', 'Guardando …'));
          try {
            localStorage.setItem('arc-demo-save', new Date().toISOString());
            setStatus(
              t('Lokal gespeichert', 'Saved locally', 'Guardado en local'),
            );
          } catch {
            setStatus(
              t('Speichern fehlgeschlagen', 'Save failed', 'Error al guardar'),
            );
          }
        }}
      />
      <p aria-live="polite">{status}</p>
    </>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetButtonData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.

### onAction

Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events).

### onClick

Notifica el clic. Ten en cuenta los argumentos específicos del widget más abajo.

```typescript
onClick?: () => void | Promise<void>;
```

## Configuración

Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.

### title

Etiqueta; como slot también es posible con JSX.

Tipo: `ArcWidgetSlot`.

### subtitle

Etiqueta adicional.

Tipo: `ArcWidgetSlot`.

### icon

Símbolo opcional o slot de contenido admitido.

Tipo: `ArcWidgetSlot`.

### prefix

Contenido antes de la etiqueta.

Tipo: `ArcWidgetSlot`.

### suffix

Contenido después de la etiqueta o unidad.

Tipo: `ArcWidgetSlot`.

### width

Ancho del widget como valor de tamaño.

Tipo: `string`.

### height

Alto del widget, p. ej. `"320px"`. Los valores en porcentaje necesitan un contenedor padre con altura fija.

Tipo: `string`.

### borderRadius

Redondeo de las esquinas.

Tipo: `string`.

### backgroundColor

Color de fondo.

Tipo: `string`.

### fontColor

Color de la fuente.

Tipo: `string`.

### fontSize

Tamaño de fuente como valor CSS.

Tipo: `string`.

### showBadge

Muestra la marca adicional.

Tipo: `boolean`.

### badgeTitle

Contenido de la marca.

Tipo: `ArcWidgetSlot`.

### badgeColor

Color de fuente de la marca.

Tipo: `string`.

### badgeBackground

Fondo de la marca.

Tipo: `string`.

### loading

Estado de carga durante un callback de tipo promesa, activado con `show: true`.

Tipo: `ArcWidgetButtonLoading`.

## Comportamiento y límites

- `onClick` puede devolver una promesa. Con `loading.show: true`, el estado de carga permanece activo hasta el final de este proceso.

- Captura los errores de guardado en tu callback y muéstralos en tu propio estado. Un indicador de carga no sustituye un mensaje de éxito o error.

Los campos `ArcWidgetSlot` admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## Tipos de datos

Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.

```typescript
export interface ArcWidgetButtonLoading {
	show?: boolean;
	indicator?: {
		type?: 'dots' | 'spinner' | 'pulse' | string;
		color?: string;
		width?: string;
		height?: string;
		[key: string]: unknown;
	};
	hideOnFinish?: boolean;
	minDuration?: number;
	position?: string;
	hideTitle?: boolean;
	hideIcon?: boolean;
	hide?: {
		icon?: boolean | 'auto';
		title?: boolean | 'auto';
		subtitle?: boolean | 'auto';
		badge?: boolean | 'auto';
		prefix?: boolean | 'auto';
		suffix?: boolean | 'auto';
		[key: string]: unknown;
	};
	overlay?: unknown;
	styles?: ArcWidgetStyles | string | 'hover' | 'default';
	[key: string]: unknown;
}

export interface ArcWidgetButtonData extends Omit<ArcWidgetBaseData, 'actions'> {
	title?: ArcWidgetSlot;
	subtitle?: ArcWidgetSlot;
	icon?: ArcWidgetSlot;
	prefix?: ArcWidgetSlot;
	suffix?: ArcWidgetSlot;
	width?: string;
	height?: string;
	borderRadius?: string;
	backgroundColor?: string;
	fontColor?: string;
	fontSize?: string;
	showBadge?: boolean;
	badgeTitle?: ArcWidgetSlot;
	badgeColor?: string;
	badgeBackground?: string;
	loading?: ArcWidgetButtonLoading;
}

export interface ArcWidgetButtonProps extends ArcReactWidgetProps<ArcWidgetButtonData> {
	onClick?: () => void | Promise<void>;
}
```