Crear un botón reutilizable con 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:0017:59

Crear un botón reutilizable con Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 6 de 21

Clase 6 / 21

Recursos

Crear un componente de botón reutilizable en JavaScript y CSS exige más que escribir un tag HTML: implica definir variantes, estados y vincularlo a un sistema de design tokens. Aquí verás cómo construir ese botón paso a paso, conectarlo a Storybook y aplicar estilos consistentes con tendencia New Brutalism.

Cómo exporto design tokens desde Figma a un archivo JSON

Antes de tocar código, los tokens viven en Figma y necesitan salir en un formato que CSS entienda. El plugin Design Tokens resuelve ese puente sin fricción.

Desde tu archivo de fundamentos en Figma, abres el plugin, eliges qué exportar (tipográficos, colores u otros) y guardas. El resultado es un archivo JSON que puedes abrir en el navegador para revisar su estructura: cada token aparece con su tipo, dimensión y valor, listo para transformarse en variables CSS [01:00].

¿Para qué sirve exportar design tokens? Para mantener consistencia entre el diseño y el código. Cada color, tipografía o tamaño definido en Figma se convierte en una variable que reutilizas en CSS, evitando valores sueltos y desalineados.

Qué arquitectura debe tener un botón antes de programarlo

Un botón profesional no es solo un click. Tiene variantes de estilo (relleno u outline), tamaños (large, medium, small) y estados. Esa arquitectura, definida en Figma, es la que tu código JavaScript y CSS debe replicar [02:10].

Identificar estas variables antes de escribir la primera línea evita refactors gigantes después. Es el contrato entre diseño y desarrollo.

Cómo construyo el componente de botón en JavaScript

El componente vive en una función exportada que retorna un elemento del DOM. Esa función recibe parámetros para personalizar cada instancia.

Cómo declaro la función createButton con parámetros por defecto

La estructura usa una arrow function exportada con export const createButton. Recibe tres parámetros principales: style, size y label, cada uno con un valor por defecto excepto el label, que se define desde la historia [04:30].

javascript export const createButton = ({ style = 'outlined', size = 'small', label }) => { const button = document.createElement('button'); button.type = 'submit'; button.role = 'button'; button.innerHTML = label; return button; };

Los defaults garantizan que el componente no se rompa si olvidas pasar una propiedad. El label queda libre para cambiarlo desde Storybook.

Por qué asigno type y role al botón en el DOM

Después de crear el elemento con document.createElement('button'), se le asignan atributos. El type = 'submit' define su comportamiento dentro de un formulario. El role = 'button' parece redundante, pero es clave para pruebas automatizadas y accesibilidad, porque permite que un test pregunte: ¿este elemento tiene rol de botón? [06:45].

Finalmente, innerHTML = label inyecta el texto que verá el usuario, y el return button entrega el elemento listo para montar.

Cómo conecto el componente con una historia en Storybook

La historia es el escenario donde Storybook renderiza el botón. Necesita un import, un template y un export por defecto.

Primero importas el componente con llaves: import { createButton } from './Button'. Olvidar las llaves rompe la app porque la función no es nombrada por defecto, error que se manifiesta como "tal cosa no es una función" en consola [10:20].

javascript import { createButton } from './Button';

const Template = ({ label, ...args }) => { return createButton({ label, ...args }); };

export const Default = Template.bind({}); Default.args = { label: 'Button' };

El Template.bind({}) clona la función para crear una variante reutilizable. Los args definen los valores iniciales que verás en el panel de Storybook.

¿Qué hace Template.bind en Storybook? Crea una copia independiente del template para cada historia, permitiendo que cada variante tenga sus propios argumentos sin afectar a las demás.

Cómo aplico estilos al botón con variables CSS

La estilización empieza importando los tokens. En button.css se usa @import apuntando a la ruta relativa del archivo de variables: @import '../common/variables.css' [12:30].

Luego, el selector de tipo button aplica los estilos. Funciona aquí porque el componente está aislado, pero en proyectos grandes conviene una metodología como BEM para evitar colisiones de clases.

css @import '../common/variables.css';

button { border: 2px solid var(--black); }

La tendencia New Brutalism exige bordes marcados, por eso el borde de 2 píxeles sólido en negro es el primer rasgo visual. Los colores se centralizan en variables como --white: #FFFFFF y --black: #123123, manteniendo la convención de seis dígitos hexadecimales en mayúscula [13:50].

Por qué uso variables aunque CSS ya tenga colores predefinidos

La consistencia es la razón. Si en algunos lugares usas black nativo de CSS y en otros una variable, el sistema pierde coherencia. Centralizar los colores en tokens facilita cambios globales: modificas la variable y todo el sistema se actualiza.

Cómo vinculo los estilos al componente JavaScript

El último paso es importar el CSS dentro del archivo JavaScript del botón con import './button.css'. Sin esa línea, los estilos existen pero nunca se aplican al elemento renderizado [15:10].

Al guardar y recargar Storybook, el botón aparece con su borde brutalista, su tipo submit y su rol de button en el DOM. La base está lista para sumar variantes de tamaño, estilos outline versus rellenos, y estados como hover o disabled.

¿Qué plugin de Figma usaste para exportar tus tokens? Cuéntame en los comentarios cómo resolviste el reto.

import { Button } from './Button';
----------------------------------

export default {

&#x20; component: Button,

};

export const Primary = {

&#x20; args: {

&#x20;   label: 'Button',

&#x20;   primary: true,

&#x20; },

};

:root {
    --primary_300: rgb(186, 104, 200);
    --primary_50: rgb(243, 229, 245);
    --primary_600: rgb(142, 36, 170);
    --error_50: rgb(255, 235, 238);
    --error_300: rgb(229, 115, 115);
    --error_600: rgb(229, 57, 53);
    --info_50: rgb(227, 242, 253);
    --info_300: rgb(100, 181, 246);
    --info_600: rgb(30, 136, 229);
    --neutral_50: rgb(250, 250, 250);
    --neutral_300: rgb(224, 224, 224);
    --neutral_600: rgb(117, 117, 117);
    --warning_50: rgb(255, 243, 224);
    --warning_300: rgb(255, 183, 77);
    --warning_600: rgb(251, 140, 0);
    --success_50: rgb(224, 247, 250);
    --success_300: rgb(77, 208, 225);
    --success_600: rgb(0, 172, 193);
    --body-12: 12px;
    --body-14: 14px;
    --body-16: 16px;
    --body-18: 18px;
    --h2: 32px;
    --h1: 40px;
  }

Resumen

Cómo exporto design tokens desde Figma a un archivo JSON

Antes de tocar código, los tokens viven en Figma y necesitan salir en un formato que CSS entienda. El plugin Design Tokens resuelve ese puente sin fricción.

¿Para qué sirve exportar design tokens? Para mantener consistencia entre el diseño y el código. Cada color, tipografía o tamaño definido en Figma se convierte en una variable que reutilizas en CSS, evitando valores sueltos y desalineados.

Qué arquitectura debe tener un botón antes de programarlo

Identificar estas variables antes de escribir la primera línea evita refactors gigantes después. Es el contrato entre diseño y desarrollo.

Cómo construyo el componente de botón en JavaScript

El componente vive en una función exportada que retorna un elemento del DOM. Esa función recibe parámetros para personalizar cada instancia.

Cómo declaro la función createButton con parámetros por defecto

Los defaults garantizan que el componente no se rompa si olvidas pasar una propiedad. El label queda libre para cambiarlo desde Storybook.

Por qué asigno type y role al botón en el DOM

Finalmente, innerHTML = label inyecta el texto que verá el usuario, y el return button entrega el elemento listo para montar.

Cómo conecto el componente con una historia en Storybook

La historia es el escenario donde Storybook renderiza el botón. Necesita un import, un template y un export por defecto.

javascript import { createButton } from './Button';

const Template = ({ label, ...args }) => { return createButton({ label, ...args }); };

export const Default = Template.bind({}); Default.args = { label: 'Button' };

El Template.bind({}) clona la función para crear una variante reutilizable. Los args definen los valores iniciales que verás en el panel de Storybook.

¿Qué hace Template.bind en Storybook? Crea una copia independiente del template para cada historia, permitiendo que cada variante tenga sus propios argumentos sin afectar a las demás.

Cómo aplico estilos al botón con variables CSS

La estilización empieza importando los tokens. En button.css se usa @import apuntando a la ruta relativa del archivo de variables: @import '../common/variables.css' [12:30].

css @import '../common/variables.css';

button { border: 2px solid var(--black); }

Por qué uso variables aunque CSS ya tenga colores predefinidos

Cómo vinculo los estilos al componente JavaScript

El último paso es importar el CSS dentro del archivo JavaScript del botón con import './button.css'. Sin esa línea, los estilos existen pero nunca se aplican al elemento renderizado [15:10].

¿Qué plugin de Figma usaste para exportar tus tokens? Cuéntame en los comentarios cómo resolviste el reto.

Comentarios (8)8 comentarios

JAIRO SALAZAR CASTAÑO

Hace 4 años

Comparto mi progreso :)

Estefany Aguilar

Profesor

Espectacular !!! 🎉🎉🎉

Daniel Lucumi

Hace 2 años

Algo que me he encontrado trabajando con storybook es la capacidad de hacer pruebas de iteraccion

Natalia Reyes Vargas

Teff porqie consideraste hacer estos componentes con vanilla js en lugar de ya logica JSX por ejemplo?

Ivan Osvaldo Ocampo Arroyo

Hola Profe, una consulta… ¿Qué plugin utiliza para que le despliegue el listado de sus variables al color los dos guiones medios?

Ivan ! Es el mismo VSC que lo hace, mira: https://getfrontend.tips/quickly-type-color-variables/

Patrick Jhonatan Hernandez Blanco

Les comparto lo que llevo hasta el momento, usando React + TypeScript

Juan Valero Reyes

pero como haces para comitear este output (json) a tu repo. lo ideal seria: que los cambios en figma los pueda pushear a tu repo

Jesús Miguel Quinto Teran

Hace 3 años

Acá el equivalente para los que trabajan con React:

José Adrian Ruiz Carmona

/** variables.css **/ Code:

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

Crear un botón reutilizable con 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