How can you set custom labels for controls in Storybook?

Setting custom labels for controls in Storybook is a useful feature that helps developers understand the purpose and configuration of controls more clearly. In Storybook, we can define labels for each control using the argTypes property. Here, I'll demonstrate with a concrete example.

Suppose we have a component named Button that we want to set more descriptive labels for its color and onClick properties.

Example Code:

First, here is the basic code for our Button component:

jsx
import React from 'react';

const Button = ({ color, children, onClick }) => {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

Next, in Storybook, we need to set up the story for this component. We use the argTypes property in the story to define control labels:

jsx
import React from 'react';
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    color: {
      control: 'color',
      name: 'Background Color'  // Custom label
    },
    onClick: {
      action: 'clicked',
      name: 'Click Event'  // Custom label
    }
  }
};

const Template = (args) => <Button {...args} >Click me</Button>;

export const Primary = Template.bind({});
Primary.args = {
  color: 'blue'
};

In the above code, we set 'Background Color' as the label for the color control and 'Click Event' as the label for the onClick control. In this way, the Storybook UI displays these custom labels instead of the simple property names, making the functionality and purpose of controls clearer.

Effect

In the Storybook controls panel, users will see 'Background Color' and 'Click Event' instead of color and onClick, making the labels more intuitive and user-friendly, which enhances development and testing efficiency.

In summary, by setting argTypes and defining the name value for properties, we can implement custom labels for controls in Storybook, which is an effective way to improve component usability.