aaronmcadam/button.stories.mdx

## button.stories.mdx

      
    Raw
  

              button.stories.mdx
            
          
    import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
import { HStack, Icon, chakra } from '../..';
import {
Button,
SpotlightMailIcon2,
SpotlightMailIcon,
SpotlightPlusIcon,
} from './button';
import { MailIcon, PlusIcon as SolidPlusIcon } from '@heroicons/react/solid';
<Meta
title="Spotlight/Button"
component={Button}
argTypes={{
variant: {
table: {
defaultValue: { summary: 'secondary' },
},
},
}}
args={{
children: 'Button text',
}}
/>
export const Template = (args) => <Button {...args} />;
Button

A button communicates that users can trigger an action.

Extends Chakra UI's Button component.
Places you’d use a button include:

Submitting a form
Closing a modal
Moving to the next step in a flow

A button can have an icon and/or text.
The default variant is secondary, which we set in the theme configuration.

  
    Button text
  

Variants

Use the variant prop to change the visual style of the button. You can set the
value to primary or secondary.

  
    {Template.bind({})}
  
  
    {Template.bind({})}
  

Sizes

Use the size prop to change the size of the button. You can set the value to
xs, sm, md, or lg.

  
    {Template.bind({})}
  
  
    {Template.bind({})}
  
  
    {Template.bind({})}
  
  
    {Template.bind({})}
  

With icon

You can add leading or trailing icons to the button using the leadingIcon and
trailingIcon props. Note that they must be React elements, not strings.

  
    {Template.bind({})}
  
  
    {Template.bind({})}
  
  ,
    }}
  >
    {Template.bind({})}
  
  ,
    }}
  >
    {Template.bind({})}
  
  ,
    }}
  >
    {Template.bind({})}
  

Props

NOTE: This table doesn't list all available props yet.