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.