How to set a Type label in a description?

[mdbiscan]

Summary

I cannot find a clear answer in the documentation or searching around this repo for how to fix the unknown type label. Why are all the types unknown, except for a few and why can't I customize them? I understand Storybook is trying to infer the type, but how can I override it?

Additional information

React v19
Storybook v9.1.4

Addons:

• "@chromatic-com/storybook": "^4.1.1",
• "@eslint-react/eslint-plugin": "^1.53.0",
• "@storybook/addon-a11y": "^9.1.4",
• "@storybook/addon-docs": "^9.1.4",
• "@storybook/addon-links": "^9.1.4",
• "@storybook/addon-onboarding": "^9.1.4",
• "@storybook/addon-postcss": "^2.0.0",
• "@storybook/react-vite": "^9.1.4",
• "msw-storybook-addon": "^2.0.5",

export default {
  argTypes: {
    afterIcon: { control: false, description: "deprecated", type: "string" },
    beforeIcon: { control: false, description: "deprecated", type: "string" },
    children: { control: false },
    component: { control: false, description: "deprecated", type: "string" },
    disabled: {
      control: {
        type: "select",
      },
      defaultValue: "false",
      options: [true, false],
      type: { summary: "boolean" },
    },
    onClick: { control: false, action: "clicked" },
    size: {
      control: {
        type: "select",
      },
      defaultValue: Button.SIZE.MD,
      description: "defines the size of the button",
      options: [Button.SIZE.SM, Button.SIZE.MD, Button.SIZE.LG],
      type: "string",
    },
    type: {
      control: { type: "select" },
      description: "defines behavior within webforms",
      options: ["button", "submit"],
      type: "string",
    },
    variant: {
      control: { type: "select" },
      description: "defines the buttons visual style",
      defaultValue: Button.VARIANT.PRIMARY,
      options: [
        Button.VARIANT.NEUTRAL,
        Button.VARIANT.NONE,
        Button.VARIANT.PRIMARY,
        Button.VARIANT.SECONDARY,
        Button.VARIANT.SUCCESS,
        Button.VARIANT.TERTIARY,
        Button.VARIANT.WARNING,
      ],
    },
  },
  component: Button,
  parameters: {
    layout: "centered",
  },
};

Create a reproduction

No response

[dosubot[bot]]

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

Storybook shows unknown type labels when it can't infer the type from your component's TypeScript or PropTypes. You can override this and set a custom type label in the Docs table by using the table.type.summary property in your argTypes config. For example:

argTypes: {
  size: {
    table: {
      type: { summary: 'ButtonSize' }, // This will show 'ButtonSize' in the Type column
    },
    // ...other config
  },
}

You can also use the simpler type: { summary: 'string' } or just type: 'string' for basic cases, but table.type.summary gives you more control and always takes precedence in the Docs table display
docs.

For displaying constant values (like Button.SIZE.MD) in the Docs table, Storybook will only show the actual value if you assign the primitive value directly to defaultValue or options. If you use a variable reference, Docs may show the variable name or unknown if it can't resolve it at runtime. To ensure the value appears as you want, assign the primitive directly or use a custom summary:

argTypes: {
  size: {
    defaultValue: 'md', // instead of Button.SIZE.MD
    options: ['sm', 'md', 'lg'], // instead of [Button.SIZE.SM, ...]
    table: {
      type: { summary: "'sm' | 'md' | 'lg'" },
      defaultValue: { summary: "'md'" },
    },
  },
}

This approach guarantees the Docs table displays the intended values and type info, not just variable names or unknown
docs.

If you need to show a more complex type or value, you can use the detail property alongside summary for extra info in the Docs table.

Let me know if you want an example for a specific prop!

To reply, just mention @dosu.

---

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

[mdbiscan]

Thank you! It appears that only using the table block works to fix type summary.