0
# Utility Components
1

2
Helper components for progress indication, loading states, messages, avatars, and various UI utilities that enhance user experience and provide visual feedback.
3

4
## Capabilities
5

6
### Progress & Loading Components
7

8
#### ProgressBar
9
Linear progress indicator with determinate and indeterminate modes.
10

11
```typescript { .api }
12
/**
13
 * Linear progress indicator
14
 */
15
import ProgressBar from "primevue/progressbar";
16

17
interface ProgressBarProps extends BaseComponentProps {
18
  value?: number;
19
  mode?: "determinate" | "indeterminate";
20
  showValue?: boolean;
21
  unit?: string;
22
}
23
```
24

25
#### ProgressSpinner
26
Circular loading spinner with customizable appearance.
27

28
```typescript { .api }
29
/**
30
 * Circular loading spinner
31
 */
32
import ProgressSpinner from "primevue/progressspinner";
33

34
interface ProgressSpinnerProps extends BaseComponentProps {
35
  strokeWidth?: string;
36
  fill?: string;
37
  animationDuration?: string;
38
}
39
```
40

41
#### Skeleton
42
Loading placeholder with various shapes and animations.
43

44
```typescript { .api }
45
/**
46
 * Loading placeholder component
47
 */
48
import Skeleton from "primevue/skeleton";
49

50
interface SkeletonProps extends BaseComponentProps {
51
  shape?: "rectangle" | "circle";
52
  size?: string;
53
  width?: string;
54
  height?: string;
55
  borderRadius?: string;
56
  animation?: "pulse" | "wave" | "none";
57
}
58
```
59

60
#### BlockUI
61
UI blocking overlay to prevent user interaction during processing.
62

63
```typescript { .api }
64
/**
65
 * UI blocking overlay
66
 */
67
import BlockUI from "primevue/blockui";
68

69
interface BlockUIProps extends BaseComponentProps {
70
  blocked?: boolean;
71
  fullScreen?: boolean;
72
  baseZIndex?: number;
73
  autoZIndex?: boolean;
74
}
75
```
76

77
### Message Components
78

79
#### Toast
80
Temporary notification messages with auto-dismiss and positioning.
81

82
```typescript { .api }
83
/**
84
 * Toast notification container
85
 */
86
import Toast from "primevue/toast";
87

88
interface ToastProps extends BaseComponentProps {
89
  group?: string;
90
  position?: "top-right" | "top-left" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center" | "center";
91
  autoZIndex?: boolean;
92
  baseZIndex?: number;
93
  breakpoints?: object;
94
  closeIcon?: string;
95
  infoIcon?: string;
96
  warnIcon?: string;
97
  errorIcon?: string;
98
  successIcon?: string;
99
  closeButtonProps?: object;
100
}
101
```
102

103
#### Message
104
Standalone message display with severity levels and customizable content.
105

106
```typescript { .api }
107
/**
108
 * Standalone message component
109
 */
110
import Message from "primevue/message";
111

112
interface MessageProps extends BaseComponentProps {
113
  severity?: "success" | "info" | "warn" | "error" | "secondary" | "contrast";
114
  closable?: boolean;
115
  sticky?: boolean;
116
  life?: number;
117
  icon?: string;
118
  closeIcon?: string;
119
  closeButtonProps?: object;
120
}
121
```
122

123
#### InlineMessage
124
Inline status messages for forms and content validation.
125

126
```typescript { .api }
127
/**
128
 * Inline message for forms and validation
129
 */
130
import InlineMessage from "primevue/inlinemessage";
131

132
interface InlineMessageProps extends BaseComponentProps {
133
  severity?: "success" | "info" | "warn" | "error" | "secondary" | "contrast";
134
  icon?: string;
135
}
136
```
137

138
### Visual Elements
139

140
#### Avatar
141
User avatar display with image, icon, or text content.
142

143
```typescript { .api }
144
/**
145
 * User avatar component
146
 */
147
import Avatar from "primevue/avatar";
148

149
interface AvatarProps extends BaseComponentProps {
150
  label?: string;
151
  icon?: string;
152
  image?: string;
153
  size?: "normal" | "large" | "xlarge";
154
  shape?: "square" | "circle";
155
  template?: string;
156
}
157
```
158

159
#### AvatarGroup
160
Container for grouping multiple avatars with overflow handling.
161

162
```typescript { .api }
163
/**
164
 * Avatar group container
165
 */
166
import AvatarGroup from "primevue/avatargroup";
167

168
interface AvatarGroupProps extends BaseComponentProps {
169
  // Template-based container for Avatar components
170
}
171
```
172

173
#### Badge
174
Small status indicator with value display and severity levels.
175

176
```typescript { .api }
177
/**
178
 * Status badge component
179
 */
180
import Badge from "primevue/badge";
181

182
interface BadgeProps extends BaseComponentProps {
183
  value?: any;
184
  severity?: "secondary" | "info" | "success" | "warning" | "danger" | "contrast";
185
  size?: "large" | "xlarge";
186
}
187
```
188

189
#### Chip
190
Compact information display with icon and remove action.
191

192
```typescript { .api }
193
/**
194
 * Compact information chip
195
 */
196
import Chip from "primevue/chip";
197

198
interface ChipProps extends BaseComponentProps {
199
  label?: string;
200
  icon?: string;
201
  image?: string;
202
  removable?: boolean;
203
  removeIcon?: string;
204
}
205
```
206

207
#### Tag
208
Label/tag display with severity levels and customization options.
209

210
```typescript { .api }
211
/**
212
 * Label/tag component
213
 */
214
import Tag from "primevue/tag";
215

216
interface TagProps extends BaseComponentProps {
217
  value?: any;
218
  severity?: "secondary" | "info" | "success" | "warning" | "danger" | "contrast";
219
  rounded?: boolean;
220
  icon?: string;
221
}
222
```
223

224
### Input Enhancement Components
225

226
#### FloatLabel
227
Floating input labels that animate on focus.
228

229
```typescript { .api }
230
/**
231
 * Floating label wrapper
232
 */
233
import FloatLabel from "primevue/floatlabel";
234

235
interface FloatLabelProps extends BaseComponentProps {
236
  // Wrapper component for input controls with floating labels
237
}
238
```
239

240
#### IconField
241
Input field wrapper with integrated icon positioning.
242

243
```typescript { .api }
244
/**
245
 * Input field with icon integration
246
 */
247
import IconField from "primevue/iconfield";
248

249
interface IconFieldProps extends BaseComponentProps {
250
  iconPosition?: "left" | "right";
251
}
252
```
253

254
#### InputIcon
255
Icon component specifically designed for input fields.
256

257
```typescript { .api }
258
/**
259
 * Icon for input fields
260
 */
261
import InputIcon from "primevue/inputicon";
262

263
interface InputIconProps extends BaseComponentProps {
264
  class?: string;
265
}
266
```
267

268
**Usage Example:**
269

270
```vue
271
<template>
272
  <!-- Icon field with input -->
273
  <IconField iconPosition="left">
274
    <InputIcon class="pi pi-search" />
275
    <InputText v-model="searchValue" placeholder="Search..." />
276
  </IconField>
277
  
278
  <!-- Floating label -->
279
  <FloatLabel>
280
    <InputText id="username" v-model="username" />
281
    <label for="username">Username</label>
282
  </FloatLabel>
283
</template>
284
```
285

286
### Special Utility Components
287

288
#### Portal
289
DOM portal for rendering content outside the component tree.
290

291
```typescript { .api }
292
/**
293
 * DOM portal component
294
 */
295
import Portal from "primevue/portal";
296

297
interface PortalProps extends BaseComponentProps {
298
  appendTo?: string;
299
  disabled?: boolean;
300
}
301
```
302

303
#### ScrollTop
304
Scroll to top button that appears based on scroll position.
305

306
```typescript { .api }
307
/**
308
 * Scroll to top button
309
 */
310
import ScrollTop from "primevue/scrolltop";
311

312
interface ScrollTopProps extends BaseComponentProps {
313
  target?: "window" | "parent";
314
  threshold?: number;
315
  icon?: string;
316
  behavior?: "auto" | "smooth";
317
}
318
```
319

320
#### DeferredContent
321
Lazy-loaded content that renders when visible in viewport.
322

323
```typescript { .api }
324
/**
325
 * Lazy content loading component
326
 */
327
import DeferredContent from "primevue/deferredcontent";
328

329
interface DeferredContentProps extends BaseComponentProps {
330
  // Content rendered when component becomes visible
331
}
332
```
333

334
#### Terminal
335
Command-line interface component for interactive terminal applications.
336

337
```typescript { .api }
338
/**
339
 * Terminal interface component
340
 */
341
import Terminal from "primevue/terminal";
342

343
interface TerminalProps extends BaseComponentProps {
344
  welcomeMessage?: string;
345
  prompt?: string;
346
}
347
```
348

349
**Usage Example:**
350

351
```vue
352
<template>
353
  <Terminal 
354
    welcomeMessage="Welcome to PrimeVue Terminal"
355
    prompt="primevue $"
356
  />
357
</template>
358

359
<script setup>
360
import { onMounted } from 'vue';
361
import Terminal from 'primevue/terminal';
362
import TerminalService from 'primevue/terminalservice';
363

364
onMounted(() => {
365
  TerminalService.on('command', (command) => {
366
    let response;
367
    if (command === 'date')
368
      response = new Date().toDateString();
369
    else if (command === 'greet')
370
      response = 'Hello World!';
371
    else if (command.startsWith('echo '))
372
      response = command.slice(5);
373
    else
374
      response = 'Unknown command: ' + command;
375
    
376
    TerminalService.emit('response', response);
377
  });
378
});
379
</script>
380
```
381

382
#### Inplace
383
Inline editing component that switches between display and edit modes.
384

385
```typescript { .api }
386
/**
387
 * Inline editing component
388
 */
389
import Inplace from "primevue/inplace";
390

391
interface InplaceProps extends BaseComponentProps {
392
  active?: boolean;
393
  closable?: boolean;
394
  disabled?: boolean;
395
  closeIcon?: string;
396
  displayProps?: object;
397
  closeButtonProps?: object;
398
}
399
```
400

401
**Usage Example:**
402

403
```vue
404
<template>
405
  <Inplace>
406
    <template #display>
407
      {{ text || 'Click to Edit' }}
408
    </template>
409
    <template #content>
410
      <InputText v-model="text" @keyup.enter="$refs.inplace.deactivate()" />
411
    </template>
412
  </Inplace>
413
</template>
414

415
<script setup>
416
import { ref } from 'vue';
417
import Inplace from 'primevue/inplace';
418
import InputText from 'primevue/inputtext';
419

420
const text = ref('Editable Text');
421
</script>
422
```
423

424
## Types
425

426
```typescript { .api }
427
// Toast message interface
428
interface ToastMessage {
429
  severity?: "success" | "info" | "warn" | "error" | "secondary" | "contrast";
430
  summary?: string;
431
  detail?: string;
432
  life?: number;
433
  closable?: boolean;
434
  group?: string;
435
  styleClass?: string;
436
  contentStyleClass?: string;
437
}
438

439
// Chip remove event
440
interface ChipRemoveEvent {
441
  originalEvent: Event;
442
  value: any;
443
}
444

445
// Message severity type
446
type MessageSeverity = "success" | "info" | "warn" | "error" | "secondary" | "contrast";
447
```