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

```js
// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx

import React, { useState } from 'react';

import { Button } from './Button';

export default {
  component: Button,
};

/*
 * Example Button story with React Hooks.
 * See note below related to this example.
 */
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} />;
};

export const Primary = {
  render: () => <ButtonWithHooks />,
};
```