Controles de argTypes para botones en Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:05

Controles de argTypes para botones en Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 12 de 21

Clase 12 / 21

Recursos

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.

Resumen

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

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

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

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

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' }

¿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' }

¿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?

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.

Comentarios (5)5 comentarios

JAIRO SALAZAR CASTAÑO

Hace 4 años

Comparto mi progreso.

Edwin Jesús

Hace 3 años

Hola Estefany, cómo podría ocultar o eliminar este accordion que me está apareciendo en Angular?

Alfonso José Chavarro Cortes

Arg se refiere a los argumentos que se pasan a un componente. Estos argumentos son utilizados para controlar el estado del componente durante la visualización.

ArgType define las especificaciones de esos argumentos, como su tipo, valores por defecto y la descripción. Ayuda a documentar los componentes y a controlar el comportamiento.

Jesús Miguel Quinto Teran

Usé StoryBook para construir de forma aislada un componente de gestión de tiempo, similar al manejador de evento del calendario de Google, pero para una necesidad más puntual, fue bastante útil, pude centrarme en el funcionamiento del componente y establecer con claridad su mecanismo de integración, en este caso dejar de forma explícita el uso del patrón de componente controlado de React.

Súper útil hasta el momento.

¡Gracias!

Gaston Blanco

Le agregué una opción más que sería color.

En esencia es lo mismo que antes,

        color: {
            name: 'color',
            options:['primary','neutral', 'warning'],
             control: {
                 type: 'radio',
             }
        }

con ++type: 'color' ++tendrían algo más interesante.

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Controles de argTypes para botones en Storybook

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos