MegaButton.mdx

import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs'; import { MegaText, WithImage, SmallText } from './MegaButton.stories';

MegaButton

How to Use

There are 3 forms of megabuttons:

1. A large text, or mega text version, which just shows the label, given as either a prop or a #label slot. Unsurprisingly, this form uses a much larger text size than the others.

2. The label with text version, which uses its label as a heading and accepts a text prop or a #text slot.

3. An image version, which uses an imageSource prop to (you're not going to believe this) display an image.

The format changes automatically based on which props you provide. Just give it a label, and it'll be a mega text. Provide an imageSource and you get the image version. Give it text and it'll format itself appropriately.

Example of using this component in its mega text format in a template:

<MegaButton
  name="reward-choice"
  id="kitten"
  value="kitten"
  label="Free Kitten"
/>

MegaButtonGroup

If using a group of MegaButtons, wrap them in a RadioGroup so that they get wrapped in a fieldset and have an associated legend.

Props