0
# Button Components
1

2
Button controls with various styles, grouping, split actions, and floating action buttons for user interactions.
3

4
## Capabilities
5

6
### Button
7
Standard button with icons, loading states, badges, and multiple severities.
8

9
```typescript { .api }
10
/**
11
 * Standard button component with comprehensive styling options
12
 */
13
import Button from "primevue/button";
14

15
interface ButtonProps extends BaseComponentProps {
16
  label?: string;
17
  icon?: string;
18
  iconPos?: "left" | "right" | "top" | "bottom";
19
  iconClass?: string;
20
  badge?: string;
21
  badgeClass?: string;
22
  badgeSeverity?: "secondary" | "info" | "success" | "warning" | "help" | "danger" | "contrast";
23
  loading?: boolean;
24
  loadingIcon?: string;
25
  as?: string;
26
  asChild?: boolean;
27
  link?: boolean;
28
  severity?: "secondary" | "success" | "info" | "warning" | "help" | "danger" | "contrast";
29
  raised?: boolean;
30
  rounded?: boolean;
31
  text?: boolean;
32
  outlined?: boolean;
33
  size?: "small" | "large";
34
  plain?: boolean;
35
}
36
```
37

38
**Usage Example:**
39

40
```vue
41
<template>
42
  <Button label="Submit" icon="pi pi-check" :loading="loading" />
43
  <Button label="Save" icon="pi pi-save" severity="success" />
44
  <Button icon="pi pi-search" rounded />
45
</template>
46
```
47

48
### SplitButton
49
Button with dropdown menu for additional actions.
50

51
```typescript { .api }
52
/**
53
 * Split button with dropdown actions
54
 */
55
import SplitButton from "primevue/splitbutton";
56

57
interface SplitButtonProps extends BaseComponentProps {
58
  label?: string;
59
  icon?: string;
60
  model?: MenuItem[];
61
  autoZIndex?: boolean;
62
  baseZIndex?: number;
63
  appendTo?: string;
64
  disabled?: boolean;
65
  severity?: "secondary" | "success" | "info" | "warning" | "help" | "danger" | "contrast";
66
  raised?: boolean;
67
  rounded?: boolean;
68
  text?: boolean;
69
  outlined?: boolean;
70
  size?: "small" | "large";
71
  plain?: boolean;
72
  menuButtonIcon?: string;
73
}
74
```
75

76
### SpeedDial
77
Floating action button with expandable sub-actions.
78

79
```typescript { .api }
80
/**
81
 * Floating action button with sub-actions
82
 */
83
import SpeedDial from "primevue/speeddial";
84

85
interface SpeedDialProps extends BaseComponentProps {
86
  model?: MenuItem[];
87
  visible?: boolean;
88
  direction?: "up" | "down" | "left" | "right" | "up-left" | "up-right" | "down-left" | "down-right";
89
  transitionDelay?: number;
90
  type?: "linear" | "circle" | "semi-circle" | "quarter-circle";
91
  radius?: number;
92
  mask?: boolean;
93
  disabled?: boolean;
94
  hideOnClickOutside?: boolean;
95
  buttonClass?: string;
96
  maskClass?: string;
97
  maskStyle?: any;
98
  showIcon?: string;
99
  hideIcon?: string;
100
  rotateAnimation?: boolean;
101
  class?: string;
102
  style?: any;
103
  tooltipOptions?: object;
104
  ariaLabel?: string;
105
  ariaLabelledBy?: string;
106
}
107
```