1import { Button } from "./Button.tsx";
2import { Icon } from "../ui/Icon.tsx";
3
4// Основные варианты кнопок
5export const Variants = () => (
6 <div style="display: flex; gap: 1rem; flex-direction: column">
7 <div style="display: flex; gap: 1rem; align-items: center">
8 <Button>Default Button</Button>
9 <Button variant="primary">Primary Button</Button>
10 <Button active>Active State</Button>
11 </div>
12
13 <div style="display: flex; gap: 1rem; align-items: center">
14 <Button block>Full Width Button</Button>
15 </div>
16 </div>
17);
18
19// Кнопки с иконками
20export const WithIcons = () => (
21 <div style="display: flex; gap: 1rem; flex-direction: column">
22 <div style="display: flex; gap: 1rem; align-items: center">
23 <Button slots={{ start: <Icon>🔍</Icon> }}>
24 Search
25 </Button>
26
27 <Button slots={{ end: <Icon> </Icon> }}>
28 Next
29 </Button>
30
31 <Button
32 variant="primary"
33 slots={{
34 start: <Icon>💾</Icon>,
35 end: <Icon>↓</Icon>,
36 }}
37 >
38 Save File
39 </Button>
40 </div>
41 </div>
42);
43
44// Состояния кнопок
45export const States = () => (
46 <div style="display: flex; gap: 1rem; flex-direction: column">
47 <div style="display: flex; gap: 1rem; align-items: center">
48 <Button>Normal</Button>
49 <Button active>Active</Button>
50 <Button disabled>Disabled</Button>
51 </div>
52
53 <div style="display: flex; gap: 1rem; align-items: center">
54 <Button variant="primary">Normal</Button>
55 <Button variant="primary" active>Active</Button>
56 <Button variant="primary" disabled>Disabled</Button>
57 </div>
58 </div>
59);
60
61// Метаданные истории
62export const meta = {
63 title: "Controls/Button",
64 description: "Button component documentation",
65 component: Button,
66};
67