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} />;
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 textUse the variant
prop to change the visual style of the button. You can set the
value to primary
or secondary
.
Use the size
prop to change the size of the button. You can set the value to
xs
, sm
, md
, or lg
.
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.
NOTE: This table doesn't list all available props yet.