Configurar argTypes en Storybook te permite documentar y controlar visualmente las propiedades de un componente, como el tamaño, el estilo o el texto de un botón, directamente desde el panel de controles. Esto es clave si trabajas en un Design System y necesitas que cualquier persona del equipo entienda cómo usar tus componentes sin leer documentación extensa.

¿Qué son los args y cómo aparecen en el panel de controles?

Los args son los argumentos que le pasas a un componente desde una historia. Cuando defines un botón en Storybook con un label como "Button", ese valor se refleja automáticamente en el panel inferior llamado Controls.

En el componente del botón hay tres parámetros principales: style, size y label. Los dos primeros tienen valores por defecto (filled y small), mientras que label es el único obligatorio. Por eso aparece en la historia como un argumento que debes setear sí o sí.

¿Qué son los args en Storybook? Son los valores que pasas como propiedades a un componente dentro de una historia. Storybook los muestra en el panel de Controls para que los puedas modificar en vivo.

¿Cómo defino argTypes para personalizar los controles?

Los argTypes viven dentro del archivo de historia, usando la sintaxis de ECMAScript modules. Los escribes como un objeto donde cada llave es el nombre del parámetro que quieres modificar.

Piensa en este escenario: llega una persona nueva al equipo, abre Storybook como fuente de verdad y ve que el botón pide un label. Pero, ¿de qué tipo? ¿Acepta números, objetos, texto? Aquí es donde entran los argTypes a salvarte de la ambigüedad.

¿Cómo configuro un control de tipo texto para el label?

Dentro de argTypes, defines label con dos propiedades clave: el name (que puede mantenerse igual o ajustarse al naming de tu Design System) y el control, que en este caso es de tipo text.

js argTypes: { label: { name: 'label', control: 'text' } }

Al guardar, el input del label en el panel de Controls queda explícitamente marcado como un campo de texto. Quien llegue a usar el botón sabrá de inmediato qué tipo de dato necesita pasar.

Un detalle de consistencia: si tu Design System se llama, por ejemplo, uglysis, podrías nombrar el control como uglysis label. Pero suele ser redundante. Lo importante es que el naming sea consistente entre todos los componentes.

¿Cómo creo controles con opciones predefinidas como radio buttons?

Cuando un parámetro tiene variantes fijas, como style (que puede ser filled u outline), conviene mostrar todas las opciones disponibles en el panel. Así nadie se queda con la duda de si existen más alternativas.

Para style defines un array de options con los valores válidos y configuras el control como radio:

js style: { name: 'style', options: ['filled', 'outline'], control: 'radio' }

El resultado en Storybook es un selector de tipo radio donde puedes alternar entre filled y outline, y el botón se actualiza en tiempo real. Por debajo, Storybook está reemplazando el valor que recibe la función del componente.

¿Cómo aplico la misma lógica para el tamaño del botón?

El parámetro size sigue exactamente la misma estructura, pero con tres opciones: small, medium y large.

• small: tamaño por defecto del botón.
• medium: tamaño intermedio.
• large: tamaño expandido.

js size: { name: 'size', options: ['small', 'medium', 'large'], control: 'radio' }

Con esto consigues que el panel de Controls muestre selectores claros para style y size, en lugar de tener que crear historias separadas como ButtonFilled o ButtonOutline. Manipulas todas las características desde un solo lugar.

¿Para qué sirve argTypes en Storybook? Sirve para personalizar cómo se muestran los controles de cada propiedad en el panel, definir tipos de input (texto, radio, select) y listar opciones válidas para guiar a quien use el componente.

¿Por qué importa esto para tu Design System?

La diferencia entre usar solo args y configurar argTypes está en la claridad. Con args básicos, tu compañero sabe que existe un parámetro. Con argTypes, sabe qué tipo de dato acepta, qué opciones tiene disponibles y cómo probarlas sin tocar código.

Esto convierte a Storybook en una herramienta de onboarding real: una persona nueva entra, explora el componente, prueba combinaciones y empieza a usarlo correctamente desde el primer día.

Cuéntame en los comentarios qué argTypes configuraste en tu botón y qué controles le pusiste a tu componente.