button.stories.mdx

button.stories.mdx

import { Meta, Story, Props } from '@storybook/addon-docs/blocks'; import Button from './Button.vue'; import { scope } from '@/components/tool/ui/Button/Button.scope' import styles from '@/components/tool/ui/Button/Button.stories.scss'

<Meta title='Tool/UI/Button' component={Button} argTypes={{ label: { control: { type: 'text', }, }, size: { control: { type: 'select', options: scope.sizes }, }, type: { control: { type: 'select', options: scope.types }, }, icon: { control: { type: 'select', options: scope.icons }, } }}/>

Button

Some examples of available Button

Props

Primary Button

<Story name='Primary' args={{ label: 'Button' }}>{{ template: '', props: { label: { default: 'Button', }, size: { default: 'standard' }, type: { default: 'primary' }, icon: { default: null } } }}

  <Button :label="Button" :type="primary" :size="standard"/>

Dark Button

<Story name='Dark' args={{ label: 'Button', type: 'dark' }}>{{ template: '

', props: { label: { default: 'Button', }, type: { default: 'dark' }, size: { default: 'standard' }, icon: { default: null } } }}

  <Button :label="Button" :type="dark" :size="standard"/>

Blue green Button

<Story name='Blue green' args={{ label: 'Button', type: 'blue-green' }}>{{ template: '

', props: { label: { default: 'Button', }, type: { default: 'blue-green' }, size: { default: 'standard' }, icon: { default: null } } }}

  <Button :label="Button" :type="blue-green" :size="standard"/>

White Button

<Story name='White' args={{ label: 'Button', type: 'white' }}>{{ template: '

', props: { label: { default: 'Button', }, type: { default: 'white' }, size: { default: 'standard' }, icon: { default: null } } }}

  <Button :label="Button" :type="white" :size="standard"/>

Small Button

<Story name='Small' args={{ label: 'Button', type: 'primary', size: 'small' }}>{{ template: '

', props: { label: { default: 'Button', }, type: { default: 'primary' }, size: { default: 'small' }, icon: { default: null } } }}

  <Button :label="Button" :type="primary" :size="small"/>

Large Button

<Story name='Large' args={{ label: 'Button', type: 'primary', size: 'large' }}>{{ template: '

', props: { label: { default: 'Button', }, type: { default: 'primary' }, size: { default: 'large' }, icon: { default: null } } }}

  <Button :label="Button" :type="primary" :size="large"/>

Button with icon

<Story name='With Icon' args={{ label: 'Button', type: 'primary', size: 'standard', icon: 'new-client' }}>{{ template: '

', props: { label: { default: 'Button', }, type: { default: 'primary' }, size: { default: 'standard' }, icon: { default: 'new-client' } } }}

  <Button :label="Button" :type="primary" :size="standard" :icon="new-client"/>