1
2
3
4
5
6
7
8
9
10
11
12
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
// @ts-nocheck
import { Button } from "./button"
const docs = `### Overview
Primary action button with size, variant, and optional icon support.
Use \`IconButton\` for icon-only actions.
### API
- \`variant\`: "primary" | "secondary" | "ghost".
- \`size\`: "small" | "normal" | "large".
- \`icon\`: Icon name for a leading icon.
- Inherits Kobalte Button props and native button attributes.
### Variants and states
- Variants: primary, secondary, ghost.
- States: disabled.
### Behavior
- Renders an Icon when \`icon\` is set.
### Accessibility
- Provide clear label text; use \`aria-label\` for icon-only buttons.
### Theming/tokens
- Uses \`data-component="button"\` with size/variant data attributes.
`
export default {
title: "UI/Button",
id: "components-button",
component: Button,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
args: {
children: "Button",
variant: "secondary",
size: "normal",
},
argTypes: {
variant: {
control: "select",
options: ["primary", "secondary", "ghost"],
},
size: {
control: "select",
options: ["small", "normal", "large"],
},
icon: {
control: "select",
options: ["none", "check", "plus", "arrow-right"],
mapping: {
none: undefined,
},
},
},
}
export const Primary = {
args: {
variant: "primary",
},
}
export const Secondary = {}
export const Ghost = {
args: {
variant: "ghost",
},
}
export const WithIcon = {
args: {
children: "Continue",
icon: "arrow-right",
},
}
export const Disabled = {
args: {
variant: "primary",
disabled: true,
},
}
export const Sizes = {
render: () => (
<div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
<Button size="small" variant="secondary">
Small
</Button>
<Button size="normal" variant="secondary">
Normal
</Button>
<Button size="large" variant="secondary">
Large
</Button>
</div>
),
}
|
