0
216
ViewsChange Storybook Control label to a different name
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',
};
·
Juan Pablo Isaza
1 answers
Answer question0
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
·
Juan Pablo Isaza
Report
Answer question