0
# Buttons
1

2
Comprehensive set of action buttons with Material UI styling for various admin operations in react-admin applications.
3

4
## Capabilities
5

6
### Basic Button Components
7

8
Foundational button components with Material UI styling.
9

10
```typescript { .api }
11
/**
12
 * Base button component with Material UI styling and theming
13
 * @param props - Button configuration props
14
 * @returns Styled button component
15
 */
16
function Button(props: ButtonProps): ReactElement;
17

18
interface ButtonProps {
19
  /** Button label text */
20
  label?: string;
21
  /** Button variant */
22
  variant?: 'text' | 'outlined' | 'contained';
23
  /** Button color */
24
  color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
25
  /** Click handler */
26
  onClick?: () => void;
27
  /** Whether button is disabled */
28
  disabled?: boolean;
29
  /** Button size */
30
  size?: 'small' | 'medium' | 'large';
31
  /** Button icon */
32
  startIcon?: ReactElement;
33
  /** End icon */
34
  endIcon?: ReactElement;
35
  /** Full width styling */
36
  fullWidth?: boolean;
37
  /** Button type */
38
  type?: 'button' | 'submit' | 'reset';
39
}
40
```
41

42
### Form Action Buttons
43

44
Buttons specifically designed for form operations.
45

46
```typescript { .api }
47
/**
48
 * Save button for forms with loading state and validation
49
 * @param props - SaveButton configuration props
50
 * @returns Save button with form integration
51
 */
52
function SaveButton(props: SaveButtonProps): ReactElement;
53

54
/**
55
 * Delete button for forms with confirmation dialog
56
 * @param props - DeleteButton configuration props
57
 * @returns Delete button with confirmation
58
 */
59
function DeleteButton(props: DeleteButtonProps): ReactElement;
60

61
interface SaveButtonProps {
62
  /** Button label text */
63
  label?: string;
64
  /** Redirect location after save */
65
  redirect?: string | false;
66
  /** Whether button is disabled */
67
  disabled?: boolean;
68
  /** Button variant */
69
  variant?: 'text' | 'outlined' | 'contained';
70
  /** Button color */
71
  color?: 'primary' | 'secondary';
72
  /** Transform function for save data */
73
  transform?: (data: any) => any;
74
  /** Click handler */
75
  onClick?: () => void;
76
  /** Button icon */
77
  icon?: ReactElement;
78
  /** Whether to submit on enter key */
79
  submitOnEnter?: boolean;
80
}
81

82
interface DeleteButtonProps {
83
  /** Button label text */
84
  label?: string;
85
  /** Redirect location after delete */
86
  redirect?: string;
87
  /** Whether button is disabled */
88
  disabled?: boolean;
89
  /** Confirmation dialog title */
90
  confirmTitle?: string;
91
  /** Confirmation dialog content */
92
  confirmContent?: string;
93
  /** Button color */
94
  color?: 'primary' | 'error';
95
  /** Mutation mode */
96
  mutationMode?: 'optimistic' | 'pessimistic' | 'undoable';
97
}
98
```
99

100
### Navigation Buttons
101

102
Buttons for navigation between different views and records.
103

104
```typescript { .api }
105
/**
106
 * Edit button for navigating to edit view
107
 * @param props - EditButton configuration props
108
 * @returns Edit navigation button
109
 */
110
function EditButton(props: EditButtonProps): ReactElement;
111

112
/**
113
 * Show button for navigating to show view
114
 * @param props - ShowButton configuration props
115
 * @returns Show navigation button
116
 */
117
function ShowButton(props: ShowButtonProps): ReactElement;
118

119
/**
120
 * Create button for navigating to create view
121
 * @param props - CreateButton configuration props
122
 * @returns Create navigation button
123
 */
124
function CreateButton(props: CreateButtonProps): ReactElement;
125

126
/**
127
 * Clone button for duplicating existing records
128
 * @param props - CloneButton configuration props
129
 * @returns Clone navigation button
130
 */
131
function CloneButton(props: CloneButtonProps): ReactElement;
132

133
interface EditButtonProps {
134
  /** Button label text */
135
  label?: string;
136
  /** Record to edit */
137
  record?: any;
138
  /** Resource name */
139
  resource?: string;
140
  /** Whether button is disabled */
141
  disabled?: boolean;
142
  /** Button icon */
143
  icon?: ReactElement;
144
}
145

146
interface ShowButtonProps {
147
  /** Button label text */
148
  label?: string;
149
  /** Record to show */
150
  record?: any;
151
  /** Resource name */
152
  resource?: string;
153
  /** Whether button is disabled */
154
  disabled?: boolean;
155
  /** Button icon */
156
  icon?: ReactElement;
157
}
158

159
interface CreateButtonProps {
160
  /** Button label text */
161
  label?: string;
162
  /** Resource name */
163
  resource?: string;
164
  /** Whether button is disabled */
165
  disabled?: boolean;
166
  /** Button variant */
167
  variant?: 'text' | 'outlined' | 'contained';
168
  /** Button icon */
169
  icon?: ReactElement;
170
}
171

172
interface CloneButtonProps {
173
  /** Button label text */
174
  label?: string;
175
  /** Record to clone */
176
  record?: any;
177
  /** Resource name */
178
  resource?: string;
179
  /** Whether button is disabled */
180
  disabled?: boolean;
181
  /** Button icon */
182
  icon?: ReactElement;
183
}
184
```
185

186
### Utility Buttons
187

188
Buttons for common administrative operations.
189

190
```typescript { .api }
191
/**
192
 * Export button for data export functionality
193
 * @param props - ExportButton configuration props
194
 * @returns Export button with download functionality
195
 */
196
function ExportButton(props: ExportButtonProps): ReactElement;
197

198
/**
199
 * Refresh button for reloading data
200
 * @param props - RefreshButton configuration props
201
 * @returns Refresh button with data reload
202
 */
203
function RefreshButton(props: RefreshButtonProps): ReactElement;
204

205
/**
206
 * Update button for record updates
207
 * @param props - UpdateButton configuration props
208
 * @returns Update button with mutation
209
 */
210
function UpdateButton(props: UpdateButtonProps): ReactElement;
211

212
interface ExportButtonProps {
213
  /** Button label text */
214
  label?: string;
215
  /** Export format */
216
  format?: 'csv' | 'json' | 'xlsx';
217
  /** Whether button is disabled */
218
  disabled?: boolean;
219
  /** Button icon */
220
  icon?: ReactElement;
221
  /** Export filename */
222
  filename?: string;
223
  /** Data transform function for export */
224
  transform?: (data: any[]) => any[];
225
}
226

227
interface RefreshButtonProps {
228
  /** Button label text */
229
  label?: string;
230
  /** Whether button is disabled */
231
  disabled?: boolean;
232
  /** Button icon */
233
  icon?: ReactElement;
234
}
235

236
interface UpdateButtonProps {
237
  /** Button label text */
238
  label?: string;
239
  /** Data to update */
240
  data?: any;
241
  /** Whether button is disabled */
242
  disabled?: boolean;
243
  /** Button icon */
244
  icon?: ReactElement;
245
  /** Mutation mode */
246
  mutationMode?: 'optimistic' | 'pessimistic' | 'undoable';
247
}
248
```
249

250
### Bulk Operation Buttons
251

252
Buttons for operations on multiple selected records.
253

254
```typescript { .api }
255
/**
256
 * Bulk delete button for deleting multiple records
257
 * @param props - BulkDeleteButton configuration props
258
 * @returns Bulk delete button with confirmation
259
 */
260
function BulkDeleteButton(props: BulkDeleteButtonProps): ReactElement;
261

262
/**
263
 * Bulk export button for exporting multiple records
264
 * @param props - BulkExportButton configuration props
265
 * @returns Bulk export button with download
266
 */
267
function BulkExportButton(props: BulkExportButtonProps): ReactElement;
268

269
interface BulkDeleteButtonProps {
270
  /** Button label text */
271
  label?: string;
272
  /** Whether button is disabled */
273
  disabled?: boolean;
274
  /** Confirmation dialog title */
275
  confirmTitle?: string;
276
  /** Confirmation dialog content */
277
  confirmContent?: string;
278
  /** Button icon */
279
  icon?: ReactElement;
280
  /** Mutation mode */
281
  mutationMode?: 'optimistic' | 'pessimistic' | 'undoable';
282
}
283

284
interface BulkExportButtonProps {
285
  /** Button label text */
286
  label?: string;
287
  /** Export format */
288
  format?: 'csv' | 'json' | 'xlsx';
289
  /** Whether button is disabled */
290
  disabled?: boolean;
291
  /** Button icon */
292
  icon?: ReactElement;
293
  /** Export filename */
294
  filename?: string;
295
}
296
```
297

298
### Menu and Navigation
299

300
Buttons for menu systems and navigation.
301

302
```typescript { .api }
303
/**
304
 * Menu item link component for navigation menus
305
 * @param props - MenuItemLink configuration props
306
 * @returns Menu item with navigation link
307
 */
308
function MenuItemLink(props: MenuItemLinkProps): ReactElement;
309

310
/**
311
 * Button group component for organizing related buttons
312
 * @param props - ButtonGroup configuration props
313
 * @returns Grouped buttons container
314
 */
315
function ButtonGroup(props: ButtonGroupProps): ReactElement;
316

317
interface MenuItemLinkProps {
318
  /** Navigation target path */
319
  to: string;
320
  /** Menu item label */
321
  primaryText: string;
322
  /** Left icon component */
323
  leftIcon?: ReactElement;
324
  /** Click handler */
325
  onClick?: () => void;
326
  /** Dense styling */
327
  dense?: boolean;
328
  /** Whether item is selected */
329
  selected?: boolean;
330
}
331

332
interface ButtonGroupProps {
333
  /** Child button components */
334
  children: ReactNode;
335
  /** Group variant */
336
  variant?: 'text' | 'outlined' | 'contained';
337
  /** Group color */
338
  color?: 'primary' | 'secondary';
339
  /** Group size */
340
  size?: 'small' | 'medium' | 'large';
341
  /** Group orientation */
342
  orientation?: 'horizontal' | 'vertical';
343
  /** Whether buttons are disabled */
344
  disabled?: boolean;
345
}
346
```
347

348
**Usage Examples:**
349

350
```typescript
351
import { 
352
  Button, 
353
  SaveButton, 
354
  DeleteButton, 
355
  EditButton,
356
  ExportButton,
357
  BulkDeleteButton 
358
} from "ra-ui-materialui";
359
import { Save, Delete, Edit, Download } from "@mui/icons-material";
360

361
// Basic button
362
<Button 
363
  label="Custom Action" 
364
  variant="contained" 
365
  color="primary"
366
  onClick={handleClick}
367
  startIcon={<Save />}
368
/>
369

370
// Form save button
371
<SaveButton 
372
  label="Save Changes" 
373
  redirect="list"
374
  transform={data => ({ ...data, updatedAt: new Date() })}
375
/>
376

377
// Delete with confirmation
378
<DeleteButton 
379
  confirmTitle="Delete Confirmation"
380
  confirmContent="Are you sure you want to delete this item?"
381
  mutationMode="undoable"
382
/>
383

384
// Export button
385
<ExportButton 
386
  format="csv"
387
  filename="users-export"
388
  icon={<Download />}
389
/>
390
```
391

392
## Types
393

394
```typescript { .api }
395
type MutationMode = 'optimistic' | 'pessimistic' | 'undoable';
396

397
type RedirectTo = string | false | Function;
398

399
interface ConfirmDialogProps {
400
  title?: string;
401
  content?: string;
402
  confirm?: string;
403
  cancel?: string;
404
}
405
```