0
# Form Controls
1

2
Button components and form utilities with multiple variants, sizes, and animation options for building interactive interfaces.
3

4
## Capabilities
5

6
### Button Component
7

8
Primary button component with extensive customization options including variants, sizes, animations, and state management.
9

10
```typescript { .api }
11
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
  /** Render as child component using Radix Slot */
13
  asChild?: boolean;
14
  /** Button size */
15
  size?: 'small' | 'medium';
16
  /** Button padding */
17
  padding?: 'small' | 'medium' | 'none';
18
  /** Button visual variant */
19
  variant?: 'outline' | 'solid' | 'ghost';
20
  /** Click handler */
21
  onClick?: (event: React.SyntheticEvent) => void;
22
  /** Disabled state */
23
  disabled?: boolean;
24
  /** Active/pressed state */
25
  active?: boolean;
26
  /** Animation type */
27
  animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
28

29
  // Deprecated props (maintained for compatibility)
30
  /** @deprecated Use asChild instead. This will be removed in Storybook 9.0 */
31
  isLink?: boolean;
32
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
33
  primary?: boolean;
34
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
35
  secondary?: boolean;
36
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
37
  tertiary?: boolean;
38
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
39
  gray?: boolean;
40
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
41
  inForm?: boolean;
42
  /** @deprecated Use size instead. This will be removed in Storybook 9.0 */
43
  small?: boolean;
44
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
45
  outline?: boolean;
46
  /** @deprecated Add your icon as a child directly. This will be removed in Storybook 9.0 */
47
  containsIcon?: boolean;
48
}
49

50
/**
51
 * Primary button component with support for variants, sizes, animations, and accessibility features
52
 */
53
const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
54
```
55

56
### IconButton Component
57

58
Specialized button component optimized for icon-based interactions.
59

60
```typescript { .api }
61
/**
62
 * Icon-based button component for toolbar and interface actions
63
 */
64
const IconButton: React.ComponentType<{
65
  children: React.ReactNode;
66
  onClick?: () => void;
67
  disabled?: boolean;
68
  active?: boolean;
69
  title?: string;
70
}>;
71
```
72

73
### Form Namespace
74

75
Collection of form-related components and utilities.
76

77
```typescript { .api }
78
/**
79
 * Form components and utilities namespace
80
 * Contains form controls, inputs, and layout components
81
 */
82
const Form: {
83
  /** Form field container component for labels and inputs */
84
  Field: React.ComponentType<{
85
    label?: string;
86
    children: React.ReactNode;
87
    [key: string]: any;
88
  }>;
89
  /** Text input component */
90
  Input: React.ComponentType<React.InputHTMLAttributes<HTMLInputElement>>;
91
  /** Select dropdown component */
92
  Select: React.ComponentType<React.SelectHTMLAttributes<HTMLSelectElement>>;
93
  /** Textarea component for multi-line text */
94
  Textarea: React.ComponentType<React.TextareaHTMLAttributes<HTMLTextAreaElement>>;
95
  /** Button component (same as standalone Button) */
96
  Button: React.ComponentType<ButtonProps>;
97
} & React.ComponentType<React.FormHTMLAttributes<HTMLFormElement>>;
98
```
99

100
## Usage Examples
101

102
**Basic Button Usage:**
103

104
```typescript
105
import { Button } from "@storybook/components";
106

107
// Solid button (primary action)
108
<Button variant="solid" size="medium" onClick={() => console.log('clicked')}>
109
  Submit
110
</Button>
111

112
// Outline button (secondary action)
113
<Button variant="outline" size="small">
114
  Cancel
115
</Button>
116

117
// Ghost button (subtle action)
118
<Button variant="ghost" active={true}>
119
  Active State
120
</Button>
121
```
122

123
**Button Variants:**
124

125
```typescript
126
import { Button } from "@storybook/components";
127

128
// Different variants
129
<Button variant="solid">Solid Button</Button>
130
<Button variant="outline">Outline Button</Button>
131
<Button variant="ghost">Ghost Button</Button>
132

133
// Different sizes
134
<Button size="small">Small Button</Button>
135
<Button size="medium">Medium Button</Button>
136

137
// Different padding
138
<Button padding="small">Small Padding</Button>
139
<Button padding="medium">Medium Padding</Button>
140
<Button padding="none">No Padding</Button>
141
```
142

143
**Button Animations:**
144

145
```typescript
146
import { Button } from "@storybook/components";
147

148
// Animated buttons
149
<Button animation="rotate360" onClick={() => {}}>
150
  Rotate on Click
151
</Button>
152

153
<Button animation="glow" onClick={() => {}}>
154
  Glow Effect
155
</Button>
156

157
<Button animation="jiggle" onClick={() => {}}>
158
  Jiggle Animation
159
</Button>
160
```
161

162
**Button States:**
163

164
```typescript
165
import { Button } from "@storybook/components";
166

167
// Different states
168
<Button disabled={true}>Disabled Button</Button>
169
<Button active={true}>Active Button</Button>
170

171
// With loading state (using children)
172
<Button disabled={true}>
173
  <span>Loading...</span>
174
</Button>
175
```
176

177
**AsChild Pattern:**
178

179
```typescript
180
import { Button } from "@storybook/components";
181
import { Link } from "react-router-dom";
182

183
// Render as a link using asChild
184
<Button asChild variant="solid">
185
  <Link to="/dashboard">Go to Dashboard</Link>
186
</Button>
187

188
// Render as custom component
189
<Button asChild variant="outline">
190
  <a href="https://storybook.js.org" target="_blank">
191
    Visit Storybook
192
  </a>
193
</Button>
194
```
195

196
**IconButton Usage:**
197

198
```typescript
199
import { IconButton, Icons } from "@storybook/components";
200

201
<IconButton 
202
  onClick={() => console.log('icon clicked')}
203
  title="Settings"
204
  active={false}
205
>
206
  <Icons icon="settings" />
207
</IconButton>
208

209
// Disabled icon button
210
<IconButton disabled={true} title="Disabled Action">
211
  <Icons icon="trash" />
212
</IconButton>
213
```
214

215
**Form Components:**
216

217
```typescript
218
import { Form } from "@storybook/components";
219

220
// Complete form with all components
221
<Form onSubmit={(e) => { e.preventDefault(); console.log('submitted'); }}>
222
  <Form.Field label="Name">
223
    <Form.Input 
224
      placeholder="Enter your name" 
225
      required 
226
    />
227
  </Form.Field>
228
  
229
  <Form.Field label="Description">
230
    <Form.Textarea 
231
      placeholder="Enter description"
232
      rows={4}
233
    />
234
  </Form.Field>
235
  
236
  <Form.Field label="Category">
237
    <Form.Select>
238
      <option value="">Select category</option>
239
      <option value="ui">UI Component</option>
240
      <option value="layout">Layout</option>
241
    </Form.Select>
242
  </Form.Field>
243
  
244
  <Form.Button variant="solid" type="submit">
245
    Submit Form
246
  </Form.Button>
247
</Form>
248

249
// Individual form components
250
<Form.Input type="email" placeholder="Email address" />
251
<Form.Select defaultValue="option1">
252
  <option value="option1">Option 1</option>
253
  <option value="option2">Option 2</option>
254
</Form.Select>
255
<Form.Textarea rows={3} placeholder="Comments" />
256
```
257

258
## Migration Notes
259

260
The Button component includes extensive support for deprecated props to maintain backward compatibility:
261

262
- Use `variant` instead of `primary`, `secondary`, `tertiary`, `gray`, `outline`, `inForm`
263
- Use `size` instead of `small`
264
- Use `asChild` instead of `isLink`
265
- Add icons as children directly instead of using `containsIcon`
266

267
When using deprecated props, the component will display deprecation warnings with migration guidance. The new API provides better type safety and more consistent behavior across all button variants.