Newer
Older
import type { Meta, StoryObj } from '@storybook/vue3';
import Button from './Button.vue';
const meta: Meta = {
title: 'Components/Button',
component: Button,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component: 'A component that is used as a button. Can be used with icon.',
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
},
},
},
argTypes: {
label: { control: 'text' },
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
textStyle: { control: 'select', options: ['bold', 'italic'] },
iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
width: { control: 'text' },
theme: {
control: 'select',
options: [
'white',
'slate',
'blue',
'sky',
'teal',
'green',
'yellow',
'orange',
'pink',
'fuchsia',
'purple',
'indigo',
'rose',
'red',
'black',
],
},
textColor: {
control: 'select',
options: [
'white',
'slate',
'blue',
'sky',
'teal',
'green',
'yellow',
'orange',
'pink',
'fuchsia',
'purple',
'indigo',
'rose',
'red',
'black',
],
},
border: {
control: 'select',
options: [
'white',
'slate',
'blue',
'sky',
'teal',
'green',
'yellow',
'orange',
'pink',
'fuchsia',
'purple',
'indigo',
'rose',
'red',
'black',
],
},
},
args: {},
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {},
};
export const LargeFull: Story = {
args: {
label: 'Press me!',
size: 'large',
textStyle: 'bold',
iconPos: 'left',
width: '200',
theme: 'sky',
textColor: 'white',
border: 'black',
},
};