How to display variable name instead of object value in "Show Code" when using argTypes mapping? #33043

David0036 · 2025-11-14T09:40:57Z

David0036
Nov 14, 2025

Summary

Environment

Storybook: 10.0.0
Framework: React 19.2.0 + Vite
Icon Library: FontAwesome 3.1.0 (@fortawesome/react-fontawesome)
Addons: @storybook/addon-docs 10.0.0

Problem

I'm using argTypes.mapping to provide icon options in Storybook controls. When users select an icon and click "Show Code", the output displays the entire FontAwesome icon object instead of the variable name.

Current Setup

import { faPlus, faTrash } from "@fortawesome/react-fontawesome";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Button } from "./button";

const leadingIcons = {
  "(none)": undefined,
  faPlus: faPlus,
  faTrash: faTrash
};

const meta = {
  component: Button,
  argTypes: {
    leadingIcon: {
      options: Object.keys(leadingIcons),
      mapping: leadingIcons,
      control: { type: "select" },
    },
  },
} satisfies Meta<typeof Button>;

export default meta;

export const Playground: Story = {};

Current "Show Code" Output

When I select faPlus from the controls dropdown, "Show Code" displays:

<Button
  leadingIcon={{
    icon: [448, 512, [10133, 61543, 'add'], '2b', 'M240 48c0-8.8-7.2-16-16-16s-16...'],
    iconName: 'plus',
    prefix: 'fal'
  }}
  onPress={() => {}}
>
  Click Me
</Button>

Desired Output

I would like "Show Code" to display:

<Button leadingIcon={faPlus} onPress={() => {}}>
  Click Me
</Button>

Question

Is there a recommended way to achieve this?

The current output makes the documentation less useful since users can't simply copy-paste the code - they have to manually replace the object with the proper import.

This seems like a common use case for icon libraries (FontAwesome, Heroicons, Lucide) and component libraries (Material UI, Chakra UI) where props accept complex objects.

Any guidance would be appreciated!

Thank you!

Additional information

No response

Create a reproduction

No response

@David0036 · 2025-11-14T09:42:17Z

dosubot[bot]
bot Nov 14, 2025

Hi @David0036! I'm Dosu and I’m helping the storybook team.

There isn't a built-in way in Storybook 10.x or @storybook/addon-docs to make "Show Code" display the variable name (like faPlus) instead of the object value when using argTypes.mapping. The code output always serializes the actual value passed to the component, which for objects is the object literal, not the variable name you mapped from the control option. This is the documented and demonstrated behavior in Storybook's own examples and docs for argTypes.mapping, and no workaround or configuration is currently provided to change this output for mapped values (example, example).

If copy-pasteable code is critical for your docs, you could consider adding a custom code snippet or a note in your docs panel to show the recommended usage with the variable name. If you need more control, you might look into writing a custom docs block or decorator, but this would require manual maintenance.

Let me know if you want ideas for workarounds or custom code snippet strategies!

To reply, just mention @dosu.

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

2 replies

David0036 Nov 18, 2025
Author

For the Storybook does have support show like this for alternative solutions?. When i using argTypes.mapping.

I would like "Show Code" to display:

<Button leadingIcon="faPlus" onPress={() => {}}>
  Click Me
</Button>

dosubot[bot] bot Nov 18, 2025

Storybook does not support showing the mapping key (like "faPlus") as a string in the "Show Code" output when using argTypes.mapping—it always serializes the mapped value, not the key or variable name (docs).

If you want "Show Code" to display leadingIcon="faPlus", you have two main options:

Use string keys as arg values:
Pass the string "faPlus" as the arg, and map it to the icon object inside your component or story. This makes the code snippet copy-pasteable, but you lose some type safety and IDE support for the icon object.

// In your story
const leadingIcons = {
  "(none)": undefined,
  faPlus: faPlus,
  faTrash: faTrash
};

argTypes: {
  leadingIcon: {
    options: Object.keys(leadingIcons),
    control: { type: "select" },
  },
}

// In your component
const iconObj = leadingIcons[props.leadingIcon];

Manually override the code snippet:
Use parameters.docs.source.code or parameters.docs.source.transform to control exactly what "Show Code" displays (example). This gives you full control, but you must keep it in sync manually:
```
export const Playground: Story = {
  parameters: {
    docs: {
      source: {
        code: `<Button leadingIcon="faPlus" onPress={() => {}}>
```

Click Me
`
}
}
}
};


There is no built-in or automatic way to have Storybook display the mapping key as a string in "Show Code" when using `argTypes.mapping`. If you want to automate this further, you can use the `parameters.docs.source.transform` function to programmatically modify the code snippet before it is shown ([reference](https://github.com/storybookjs/storybook/blob/8f6ab0863d9cc70f6b2c8cbc068ff2037f0991c9/code/addons/docs/src/blocks/examples/SourceParameters.stories.tsx#L41-L48)).


<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*

---
<sup>How did I do? [Good](https://app.dosu.dev/response-feedback/750623dc-5520-46f6-be07-e24198064870?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/750623dc-5520-46f6-be07-e24198064870?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/750623dc-5520-46f6-be07-e24198064870?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/750623dc-5520-46f6-be07-e24198064870?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/750623dc-5520-46f6-be07-e24198064870?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/750623dc-5520-46f6-be07-e24198064870?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/750623dc-5520-46f6-be07-e24198064870?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat with Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/aeb86b10-c6fd-4458-9b50-3a72f4c7ee26/ask?utm_source=github)&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/storybookjs/storybook/discussions/33043)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to display variable name instead of object value in "Show Code" when using argTypes mapping? #33043

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to display variable name instead of object value in "Show Code" when using argTypes mapping? #33043

Uh oh!

David0036 Nov 14, 2025

Summary

Environment

Problem

Current Setup

Current "Show Code" Output

Desired Output

Question

Additional information

Create a reproduction

Replies: 1 comment · 2 replies

Uh oh!

dosubot[bot] bot Nov 14, 2025

Uh oh!

David0036 Nov 18, 2025 Author

Uh oh!

dosubot[bot] bot Nov 18, 2025

David0036
Nov 14, 2025

Replies: 1 comment 2 replies

dosubot[bot]
bot Nov 14, 2025

David0036 Nov 18, 2025
Author