How to write stories relies on Storybook args in order to extract variants of a component.

Example of a story with args

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,

export const ForFigma = {
  argTypes: {
    disabled: { control: 'boolean' },
    type: { control: 'select', options: ['primary', 'secondary'] },
  args: {
    // Default values
    children: 'Label',
    disabled: false,
    type: 'primary',

This example will set specific argTypes and args default values for component Button only on a story called ForFigma.

Arg in
childrenSet to value “Label” on all variants.
disabledPropose “true” and “false” variants.
typePropose “primary” and “secondary” variants.

See Storybook args for more information.