Change Storybook Control label to a different name

Question

I have a custom button component and some basic controls for the following prop; button kind, size, and children (button text).

The controls are working as intended. However, I like to change the control naming from "children" to "label".

How would I go about accomplishing this?

Thanks!

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
     kind: {
      options: ['primary', 'secondary', 'tertiary', 'danger', 'ghost'],
      control: { type: 'select' }
    },
    size: {
      options: ['default', 'sm', 'md', 'lg'],
      control: { type: 'select'},
    },
    },
};

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

export const Buttons = Template.bind({});
Buttons.args = {
  kind: 'primary',
  children: 'Button',

};

Answer 1

Almost there, within argTypes you need to enter the interested field, children, and set the custom name to be displayed on your story's control panel

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    // ...your previous code
    children: {
      name: "Label", // <---------
    },
  },
};

// ...your previous code

Buttons.args = {
  children: 'Button',
};

Result in one of my projects