storybook/docs/snippets/react/button-story.mdx-with-hooks.mdx.mdx

```md
<!-- Button.stories.mdx -->

import { useState } from 'react';

import { Canvas, Meta, Story } from '@storybook/addon-docs';

import { Button } from './Button';

<Meta title="Button" component={Button} />

<!-- Example Button story with React Hooks. See note below related to this example. -->

export const ButtonWithHooks = () => {
  // Sets the hooks for both the label and primary props
  const [value, setValue] = useState("Secondary");
  const [isPrimary, setIsPrimary] = useState(false);
  // Sets a click handler to change the label's value
  const handleOnChange = () => {
    if (!isPrimary) {
      setIsPrimary(true);
      setValue("Primary");
    }
  };
  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
};

<Canvas>
  <Story name="Primary" render={() => <ButtonWithHooks />} />
</Canvas>
```