0
# UI Elements
1

2
Basic building blocks including buttons, inputs, headers, icons, and other fundamental interface elements that form the foundation of user interfaces.
3

4
## Capabilities
5

6
### Button
7

8
Interactive buttons with comprehensive styling variations and states.
9

10
```css { .api }
11
.ui.button                    /* Basic button */
12

13
/* Button types */
14
.ui.primary.button            /* Primary brand button */
15
.ui.secondary.button          /* Secondary button */
16
.ui.basic.button              /* Basic outline button */
17
.ui.inverted.button           /* Inverted color button */
18

19
/* Button states */
20
.ui.active.button             /* Active/pressed state */
21
.ui.disabled.button           /* Disabled non-interactive state */
22
.ui.loading.button            /* Loading state with spinner */
23

24
/* Button variations */
25
.ui.fluid.button              /* Full-width button */
26
.ui.circular.button           /* Circular button */
27
.ui.labeled.button            /* Button with attached label */
28
.ui.icon.button               /* Button with icon only */
29
.ui.animated.button           /* Button with hover animation */
30

31
/* Button groups */
32
.ui.buttons                   /* Button group container */
33
.ui.labeled.icon.buttons      /* Labeled icon button group */
34
.ui.vertical.buttons          /* Vertical button group */
35
```
36

37
**Usage Examples:**
38

39
```html
40
<!-- Basic buttons -->
41
<div class="ui button">Default Button</div>
42
<div class="ui primary button">Primary Button</div>
43
<div class="ui secondary button">Secondary Button</div>
44

45
<!-- Button states -->
46
<div class="ui active button">Active Button</div>
47
<div class="ui disabled button">Disabled Button</div>
48
<div class="ui loading button">Loading...</div>
49

50
<!-- Icon buttons -->
51
<div class="ui icon button">
52
  <i class="settings icon"></i>
53
</div>
54
<div class="ui labeled icon button">
55
  <i class="settings icon"></i>
56
  Settings
57
</div>
58

59
<!-- Button groups -->
60
<div class="ui buttons">
61
  <div class="ui button">One</div>
62
  <div class="ui button">Two</div>
63
  <div class="ui button">Three</div>
64
</div>
65
```
66

67
### Input
68

69
Form input elements with enhanced styling and validation states.
70

71
```css { .api }
72
.ui.input                     /* Input container */
73
.ui.input > input             /* Actual input element */
74

75
/* Input types */
76
.ui.fluid.input               /* Full-width input */
77
.ui.mini.input                /* Mini size input */
78
.ui.small.input               /* Small size input */
79
.ui.large.input               /* Large size input */
80
.ui.huge.input                /* Huge size input */
81

82
/* Input states */
83
.ui.disabled.input            /* Disabled input */
84
.ui.error.input               /* Error state input */
85
.ui.success.input             /* Success state input */
86
.ui.loading.input             /* Loading state input */
87
.ui.focus.input               /* Focused state input */
88

89
/* Input variations */
90
.ui.transparent.input         /* Transparent background input */
91
.ui.inverted.input            /* Inverted color input */
92
.ui.labeled.input             /* Input with attached label */
93
.ui.action.input              /* Input with attached action button */
94
.ui.icon.input                /* Input with icon */
95
.ui.left.icon.input           /* Input with left-side icon */
96
.ui.right.icon.input          /* Input with right-side icon */
97
```
98

99
**Usage Examples:**
100

101
```html
102
<!-- Basic inputs -->
103
<div class="ui input">
104
  <input type="text" placeholder="Enter text...">
105
</div>
106

107
<!-- Fluid input -->
108
<div class="ui fluid input">
109
  <input type="text" placeholder="Full width input">
110
</div>
111

112
<!-- Input with icon -->
113
<div class="ui left icon input">
114
  <input type="text" placeholder="Search...">
115
  <i class="search icon"></i>
116
</div>
117

118
<!-- Input with action -->
119
<div class="ui action input">
120
  <input type="text" placeholder="Enter domain...">
121
  <div class="ui button">Search</div>
122
</div>
123

124
<!-- Input states -->
125
<div class="ui error input">
126
  <input type="text" placeholder="Error input">
127
</div>
128
<div class="ui success input">
129
  <input type="text" placeholder="Success input">
130
</div>
131
```
132

133
### Header
134

135
Content headers and titles with semantic hierarchy and styling options.
136

137
```css { .api }
138
.ui.header                    /* Basic header */
139

140
/* Header sizes */
141
.ui.huge.header               /* Largest header size */
142
.ui.large.header              /* Large header size */
143
.ui.medium.header             /* Medium header size (default) */
144
.ui.small.header              /* Small header size */
145
.ui.tiny.header               /* Smallest header size */
146

147
/* Header types */
148
.ui.dividing.header           /* Header with bottom border */
149
.ui.block.header              /* Header with background block */
150
.ui.attached.header           /* Header attached to content */
151
.ui.top.attached.header       /* Header attached to top */
152
.ui.bottom.attached.header    /* Header attached to bottom */
153

154
/* Header content */
155
.ui.icon.header               /* Header with icon */
156
.ui.sub.header                /* Sub-header text */
157

158
/* Header states */
159
.ui.disabled.header           /* Disabled header appearance */
160
.ui.inverted.header           /* Inverted color header */
161
```
162

163
**Usage Examples:**
164

165
```html
166
<!-- Basic headers -->
167
<h1 class="ui header">Main Page Title</h1>
168
<h2 class="ui header">Section Header</h2>
169
<h3 class="ui header">Subsection Header</h3>
170

171
<!-- Sized headers -->
172
<h1 class="ui huge header">Huge Header</h1>
173
<h2 class="ui large header">Large Header</h2>
174
<h3 class="ui small header">Small Header</h3>
175

176
<!-- Icon header -->
177
<h2 class="ui icon header">
178
  <i class="settings icon"></i>
179
  Account Settings
180
  <div class="sub header">Manage your account preferences</div>
181
</h2>
182

183
<!-- Dividing header -->
184
<h2 class="ui dividing header">Section Title</h2>
185

186
<!-- Attached headers -->
187
<div class="ui top attached header">
188
  Attached Header
189
</div>
190
<div class="ui attached segment">
191
  Content attached to header above.
192
</div>
193
```
194

195
### Icon
196

197
Icon system providing hundreds of scalable vector icons.
198

199
```css { .api }
200
.ui.icon                      /* Basic icon */
201
.icon                         /* Short form icon class */
202

203
/* Icon sizes */
204
.ui.mini.icon                 /* Mini size icon */
205
.ui.tiny.icon                 /* Tiny size icon */
206
.ui.small.icon                /* Small size icon */
207
.ui.large.icon                /* Large size icon */
208
.ui.big.icon                  /* Big size icon */
209
.ui.huge.icon                 /* Huge size icon */
210
.ui.massive.icon              /* Massive size icon */
211

212
/* Icon states */
213
.ui.disabled.icon             /* Disabled icon appearance */
214
.ui.loading.icon              /* Loading/spinner icon */
215
.ui.fitted.icon               /* Icon without spacing */
216
.ui.link.icon                 /* Clickable icon */
217

218
/* Icon groups */
219
.ui.corner.icon               /* Corner positioned icon */
220
.ui.icons                     /* Icon group container */
221

222
/* Common icon classes (examples) */
223
.home.icon                    /* Home icon */
224
.user.icon                    /* User icon */
225
.settings.icon                /* Settings icon */
226
.search.icon                  /* Search icon */
227
.edit.icon                    /* Edit icon */
228
.delete.icon                  /* Delete icon */
229
.save.icon                    /* Save icon */
230
.close.icon                   /* Close icon */
231
.menu.icon                    /* Menu icon */
232
.dropdown.icon                /* Dropdown arrow icon */
233
```
234

235
**Usage Examples:**
236

237
```html
238
<!-- Basic icons -->
239
<i class="home icon"></i>
240
<i class="user icon"></i>
241
<i class="settings icon"></i>
242

243
<!-- Sized icons -->
244
<i class="small home icon"></i>
245
<i class="large user icon"></i>
246
<i class="huge settings icon"></i>
247

248
<!-- Icon groups -->
249
<div class="ui icons">
250
  <i class="big home icon"></i>
251
  <i class="corner add icon"></i>
252
</div>
253

254
<!-- Icons in buttons and text -->
255
<div class="ui button">
256
  <i class="save icon"></i>
257
  Save Changes
258
</div>
259

260
<p>Click the <i class="settings icon"></i> icon to configure.</p>
261
```
262

263
### Label
264

265
Content labels for categorization, status indication, and metadata display.
266

267
```css { .api }
268
.ui.label                     /* Basic label */
269

270
/* Label types */
271
.ui.image.label               /* Label with image */
272
.ui.pointing.label            /* Label with pointing arrow */
273
.ui.corner.label              /* Corner positioned label */
274
.ui.tag.label                 /* Tag-style label */
275
.ui.basic.label               /* Basic outline label */
276

277
/* Label states */
278
.ui.active.label              /* Active label state */
279
.ui.disabled.label            /* Disabled label state */
280

281
/* Label variations */
282
.ui.circular.label            /* Circular label */
283
.ui.empty.circular.label      /* Empty circular label (dot) */
284
.ui.floating.label            /* Floating positioned label */
285
.ui.horizontal.label          /* Horizontal label */
286

287
/* Label content */
288
.ui.detail                    /* Label detail text */
289
.ui.delete.icon               /* Delete icon in label */
290

291
/* Label groups */
292
.ui.labels                    /* Label group container */
293
```
294

295
**Usage Examples:**
296

297
```html
298
<!-- Basic labels -->
299
<div class="ui label">Default</div>
300
<div class="ui red label">Error</div>
301
<div class="ui green label">Success</div>
302

303
<!-- Labels with details -->
304
<div class="ui label">
305
  Emails
306
  <div class="detail">23</div>
307
</div>
308

309
<!-- Deletable labels -->
310
<div class="ui label">
311
  Tag Name
312
  <i class="delete icon"></i>
313
</div>
314

315
<!-- Pointing labels -->
316
<div class="ui form">
317
  <div class="field">
318
    <input type="text" placeholder="Enter value">
319
    <div class="ui pointing red basic label">
320
      Please enter a value
321
    </div>
322
  </div>
323
</div>
324

325
<!-- Image labels -->
326
<div class="ui image label">
327
  <img src="avatar.jpg">
328
  John Doe
329
  <div class="detail">Admin</div>
330
</div>
331
```
332

333
### List
334

335
Lists and menus for displaying collections of related items.
336

337
```css { .api }
338
.ui.list                      /* Basic list */
339

340
/* List types */
341
.ui.bulleted.list             /* Bulleted list */
342
.ui.ordered.list              /* Numbered list */
343
.ui.link.list                 /* Clickable link list */
344
.ui.horizontal.list           /* Horizontal list layout */
345

346
/* List variations */
347
.ui.inverted.list             /* Inverted color list */
348
.ui.selection.list            /* Selectable list items */
349
.ui.animated.list             /* Animated list interactions */
350
.ui.relaxed.list              /* Extra spacing between items */
351
.ui.divided.list              /* Divided list with separators */
352
.ui.celled.list               /* Celled list with borders */
353

354
/* List items */
355
.ui.list > .item              /* List item */
356
.ui.list .header              /* List item header */
357
.ui.list .description         /* List item description */
358
.ui.list .content             /* List item content */
359

360
/* List item states */
361
.ui.list > .disabled.item     /* Disabled list item */
362
.ui.list > .active.item       /* Active list item */
363
```
364

365
**Usage Examples:**
366

367
```html
368
<!-- Basic list -->
369
<div class="ui list">
370
  <div class="item">Item 1</div>
371
  <div class="item">Item 2</div>
372
  <div class="item">Item 3</div>
373
</div>
374

375
<!-- List with content structure -->
376
<div class="ui list">
377
  <div class="item">
378
    <div class="header">Header Text</div>
379
    <div class="description">Description text goes here.</div>
380
  </div>
381
  <div class="item">
382
    <div class="header">Another Header</div>
383
    <div class="description">More description text.</div>
384
  </div>
385
</div>
386

387
<!-- Horizontal list -->
388
<div class="ui horizontal list">
389
  <div class="item">About</div>
390
  <div class="item">Contact</div>
391
  <div class="item">Help</div>
392
</div>
393

394
<!-- Bulleted list -->
395
<div class="ui bulleted list">
396
  <div class="item">Bullet point one</div>
397
  <div class="item">Bullet point two</div>
398
  <div class="item">Bullet point three</div>
399
</div>
400
```
401

402
### Loader
403

404
Loading indicators for showing progress and activity states.
405

406
```css { .api }
407
.ui.loader                    /* Basic loader/spinner */
408

409
/* Loader sizes */
410
.ui.mini.loader               /* Mini loader */
411
.ui.tiny.loader               /* Tiny loader */
412
.ui.small.loader              /* Small loader */
413
.ui.medium.loader             /* Medium loader (default) */
414
.ui.large.loader              /* Large loader */
415
.ui.big.loader                /* Big loader */
416
.ui.huge.loader               /* Huge loader */
417
.ui.massive.loader            /* Massive loader */
418

419
/* Loader types */
420
.ui.text.loader               /* Loader with text */
421
.ui.inverted.loader           /* Inverted color loader */
422
.ui.inline.loader             /* Inline loader */
423
.ui.centered.inline.loader    /* Centered inline loader */
424

425
/* Loader states */
426
.ui.active.loader             /* Active/visible loader */
427
.ui.disabled.loader           /* Disabled/hidden loader */
428
```
429

430
**Usage Examples:**
431

432
```html
433
<!-- Basic loader in segment -->
434
<div class="ui segment">
435
  <div class="ui active loader"></div>
436
  <p>Loading content...</p>
437
</div>
438

439
<!-- Text loader -->
440
<div class="ui segment">
441
  <div class="ui active text loader">Loading data</div>
442
  <p>Content placeholder</p>
443
</div>
444

445
<!-- Inline loaders -->
446
<p>Processing <div class="ui active inline loader"></div> please wait...</p>
447

448
<!-- Different sized loaders -->
449
<div class="ui segment">
450
  <div class="ui active small loader"></div>
451
  <p>Small loading indicator</p>
452
</div>
453
```
454

455
## Common Element Patterns
456

457
### Size Variations
458
All elements support the standard size scale:
459
```css { .api }
460
.ui.mini.element              /* Smallest size */
461
.ui.tiny.element              /* Very small */
462
.ui.small.element             /* Small */
463
.ui.medium.element            /* Default size */
464
.ui.large.element             /* Large */
465
.ui.big.element               /* Very large */
466
.ui.huge.element              /* Huge */
467
.ui.massive.element           /* Largest size */
468
```
469

470
### Color Variations
471
All elements support the color palette:
472
```css { .api }
473
.ui.red.element               /* Red colored element */
474
.ui.blue.element              /* Blue colored element */
475
.ui.green.element             /* Green colored element */
476
.ui.primary.element           /* Primary brand color */
477
.ui.secondary.element         /* Secondary color */
478
```
479

480
### State Classes
481
Common states across elements:
482
```css { .api }
483
.ui.active.element            /* Active/selected state */
484
.ui.disabled.element          /* Disabled/non-interactive */
485
.ui.loading.element           /* Loading state */
486
```