0
# Content Components
1

2
Content components provide display and presentation elements for rich content, user interfaces, and visual feedback. These components handle media display, user representation, and interactive content.
3

4
## Capabilities
5

6
### Button
7

8
Interactive button component with theme variants and states.
9

10
```typescript { .api }
11
/**
12
 * Interactive button component with comprehensive theming
13
 */
14
interface Button extends HTMLElement {
15
  /** Button theme variants */
16
  theme: string;
17
  /** Button is disabled */
18
  disabled: boolean;
19
  /** Button automatically focuses */
20
  autofocus: boolean;
21
  /** Button type for forms */
22
  type: 'button' | 'submit' | 'reset';
23

24
  /** Programmatically click the button */
25
  click(): void;
26
  /** Focus the button */
27
  focus(): void;
28
  /** Remove focus from button */
29
  blur(): void;
30
}
31
```
32

33
### Card
34

35
Content container with consistent styling and elevation.
36

37
```typescript { .api }
38
/**
39
 * Content card container with elevation and theming
40
 */
41
interface Card extends HTMLElement {
42
  /** Card theme variant */
43
  theme: string;
44
}
45
```
46

47
### Avatar
48

49
User avatar component supporting images, initials, and color variants.
50

51
```typescript { .api }
52
/**
53
 * User avatar component with multiple display modes
54
 */
55
interface Avatar extends HTMLElement {
56
  /** User's full name for generating initials */
57
  name: string;
58
  /** Custom abbreviation override */
59
  abbr: string;
60
  /** Image URL for avatar photo */
61
  img: string;
62
  /** Color index for theme variants (0-6) */
63
  colorIndex: number;
64
  /** Avatar size theme */
65
  theme: string;
66
}
67
```
68

69
### Avatar Group
70

71
Container for displaying multiple avatars with overflow handling.
72

73
```typescript { .api }
74
/**
75
 * Container for multiple avatars with overflow management
76
 */
77
interface AvatarGroup extends HTMLElement {
78
  /** Array of avatar items data */
79
  items: AvatarItem[];
80
  /** Maximum number of avatars to display */
81
  maxItemsVisible: number;
82
  /** Overlay items beyond limit */
83
  overlayClass: string;
84

85
  /** Get total number of items */
86
  getItemCount(): number;
87
}
88

89
/**
90
 * Avatar item data structure
91
 */
92
interface AvatarItem {
93
  name?: string;
94
  abbr?: string;
95
  img?: string;
96
  colorIndex?: number;
97
}
98
```
99

100
### Icon
101

102
SVG icon component with extensive icon library support.
103

104
```typescript { .api }
105
/**
106
 * SVG icon component with icon library integration
107
 */
108
interface Icon extends HTMLElement {
109
  /** Icon identifier (e.g., 'vaadin:user', 'lumo:clock') */
110
  icon: string;
111
  /** Icon size theme variant */
112
  size: string;
113
  /** Custom SVG content */
114
  svg: string;
115
}
116
```
117

118
### Progress Bar
119

120
Progress indicator for loading states and task completion.
121

122
```typescript { .api }
123
/**
124
 * Progress indicator component with determinate and indeterminate modes
125
 */
126
interface ProgressBar extends HTMLElement {
127
  /** Current progress value (0-1 for percentage) */
128
  value: number;
129
  /** Minimum value */
130
  min: number;
131
  /** Maximum value */
132
  max: number;
133
  /** Indeterminate loading state */
134
  indeterminate: boolean;
135
  /** Progress bar theme variant */
136
  theme: string;
137
}
138
```
139

140
### Details
141

142
Collapsible content section with summary header.
143

144
```typescript { .api }
145
/**
146
 * Collapsible details component with summary
147
 */
148
interface Details extends HTMLElement {
149
  /** Details section is expanded */
150
  opened: boolean;
151
  /** Summary text content */
152
  summary: string;
153
  /** Details theme variant */
154
  theme: string;
155

156
  /** Toggle opened/closed state */
157
  toggle(): void;
158
  /** Open the details section */
159
  open(): void;
160
  /** Close the details section */
161
  close(): void;
162
}
163

164
/**
165
 * Summary header for details component
166
 */
167
interface DetailsSummary extends HTMLElement {
168
  /** Summary is expandable */
169
  expandable: boolean;
170
}
171
```
172

173
### Upload
174

175
File upload component with drag-and-drop support.
176

177
```typescript { .api }
178
/**
179
 * File upload component with comprehensive features
180
 */
181
interface Upload extends HTMLElement {
182
  /** Upload endpoint URL */
183
  target: string;
184
  /** HTTP method for upload */
185
  method: string;
186
  /** Additional form data */
187
  formDataName: string;
188
  /** Accepted file types */
189
  accept: string;
190
  /** Maximum number of files */
191
  maxFiles: number;
192
  /** Maximum file size in bytes */
193
  maxFileSize: number;
194
  /** Currently uploaded files */
195
  files: UploadFile[];
196
  /** Disable drag-and-drop */
197
  nodrop: boolean;
198

199
  /** Upload all files */
200
  uploadFiles(): void;
201
  /** Abort all uploads */
202
  abort(): void;
203
}
204

205
/**
206
 * Individual file in upload component
207
 */
208
interface UploadFile extends HTMLElement {
209
  /** File object */
210
  file: File;
211
  /** Upload progress (0-1) */
212
  progress: number;
213
  /** Upload is complete */
214
  complete: boolean;
215
  /** Upload has error */
216
  error: boolean;
217
  /** Upload is currently in progress */
218
  uploading: boolean;
219
  /** Retry failed upload */
220
  retry(): void;
221
  /** Remove file from upload */
222
  remove(): void;
223
}
224
```
225

226
### Message Input
227

228
Input component for composing and sending messages in chat interfaces.
229

230
```typescript { .api }
231
/**
232
 * Message input field with integrated send functionality
233
 * Provides expanding text area and submit controls
234
 */
235
interface MessageInput extends HTMLElement {
236
  /** Current message text */
237
  value: string;
238
  /** Input field is disabled */
239
  disabled: boolean;
240
  /** Internationalization configuration */
241
  i18n: MessageInputI18n;
242

243
  /** Focus the input field */
244
  focus(): void;
245
}
246

247
/**
248
 * Message input internationalization
249
 */
250
interface MessageInputI18n {
251
  /** Send button label */
252
  send: string;
253
  /** Input placeholder and aria-label */
254
  message: string;
255
}
256
```
257

258
**Usage Examples:**
259

260
```typescript
261
import '@vaadin/message-input';
262

263
// Create message input
264
const messageInput = document.createElement('vaadin-message-input');
265

266
// Configure internationalization
267
messageInput.i18n = {
268
  send: 'Send',
269
  message: 'Type your message...'
270
};
271

272
// Listen for message submissions
273
messageInput.addEventListener('submit', (e) => {
274
  const message = e.detail.value;
275
  console.log('New message:', message);
276

277
  // Clear input after sending
278
  messageInput.value = '';
279
});
280

281
document.body.appendChild(messageInput);
282
```
283

284
### Message List
285

286
Display component for showing ordered lists of chat messages with user information.
287

288
```typescript { .api }
289
/**
290
 * Ordered list of chat messages with user avatars and metadata
291
 * Supports message rendering with timestamps and user information
292
 */
293
interface MessageList extends HTMLElement {
294
  /** Array of message items */
295
  items: MessageListItem[];
296
  /** Parse message text as Markdown */
297
  markdown: boolean;
298
}
299

300
/**
301
 * Individual message configuration
302
 */
303
interface MessageListItem {
304
  /** Message text content */
305
  text: string;
306
  /** Message timestamp */
307
  time: string;
308
  /** User's full name */
309
  userName: string;
310
  /** User's initials/abbreviation */
311
  userAbbr: string;
312
  /** User's avatar image URL */
313
  userImg?: string;
314
  /** User's color index for avatar background */
315
  userColorIndex?: number;
316
  /** Message theme variant */
317
  theme?: string;
318
  /** CSS class names */
319
  className?: string;
320
}
321
```
322

323
**Usage Examples:**
324

325
```typescript
326
import '@vaadin/message-list';
327

328
// Create message list
329
const messageList = document.createElement('vaadin-message-list');
330

331
// Enable markdown parsing
332
messageList.markdown = true;
333

334
// Configure messages
335
messageList.items = [
336
  {
337
    text: 'Hello everyone! 👋',
338
    time: 'yesterday',
339
    userName: 'Alice Cooper',
340
    userAbbr: 'AC',
341
    userColorIndex: 1
342
  },
343
  {
344
    text: 'Welcome to the team! Let me know if you need any **help**.',
345
    time: '2 hours ago',
346
    userName: 'Bob Smith',
347
    userAbbr: 'BS',
348
    userImg: '/avatars/bob.jpg',
349
    userColorIndex: 2
350
  },
351
  {
352
    text: 'Thanks! Looking forward to working with you all.',
353
    time: 'just now',
354
    userName: 'Charlie Davis',
355
    userAbbr: 'CD',
356
    userColorIndex: 3
357
  }
358
];
359

360
document.body.appendChild(messageList);
361
```
362

363
### Cookie Consent
364

365
Privacy compliance component for displaying cookie consent banners and managing user preferences.
366

367
```typescript { .api }
368
/**
369
 * Cookie consent banner for GDPR compliance
370
 * Shows consent request and manages user preferences
371
 */
372
interface CookieConsent extends HTMLElement {
373
  /** Consent banner position */
374
  position: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
375
  /** Custom message text */
376
  message: string;
377
  /** Dismiss button text */
378
  dismiss: string;
379
  /** Learn more link text */
380
  learnMore: string;
381
  /** Learn more link URL */
382
  learnMoreLink: string;
383
  /** Cookie name for storing consent */
384
  cookieName: string;
385

386
  /** Show the consent banner */
387
  show(): void;
388
  /** Hide the consent banner */
389
  hide(): void;
390
}
391
```
392

393
**Usage Examples:**
394

395
```typescript
396
import '@vaadin/cookie-consent';
397

398
// Create cookie consent banner
399
const cookieConsent = document.createElement('vaadin-cookie-consent');
400

401
// Configure the banner
402
cookieConsent.position = 'bottom';
403
cookieConsent.message = 'This website uses cookies to ensure you get the best experience.';
404
cookieConsent.dismiss = 'Got it!';
405
cookieConsent.learnMore = 'Learn more';
406
cookieConsent.learnMoreLink = 'https://example.com/privacy-policy';
407
cookieConsent.cookieName = 'cookie-consent';
408

409
// The banner will show automatically on first visit
410
document.body.appendChild(cookieConsent);
411
```
412

413
For complete API details and usage examples, see the main documentation.