Hugging Face's logo

SaylorTwift
/
opencode

agent
coding-agent
cli
llm
typescript
tool-use
Model card Files
xet
 Community
opencode
File size: 2,077 Bytes
eb1202c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
109
// @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>
  ),
}