0
# Material Design Components
1

2
Material Design components and theming system providing Google's Material Design implementation for Compose Multiplatform applications.
3

4
## Capabilities
5

6
### Core Material Components
7

8
Essential Material Design UI components for building modern application interfaces.
9

10
```kotlin { .api }
11
/**
12
 * Material Design button component
13
 */
14
@Composable
15
fun Button(
16
    onClick: () -> Unit,
17
    modifier: Modifier = Modifier,
18
    enabled: Boolean = true,
19
    shape: Shape = MaterialTheme.shapes.small,
20
    colors: ButtonColors = ButtonDefaults.buttonColors(),
21
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
22
    border: BorderStroke? = null,
23
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
24
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
25
    content: @Composable RowScope.() -> Unit
26
)
27

28
/**
29
 * Material Design outlined button variant
30
 */
31
@Composable
32
fun OutlinedButton(
33
    onClick: () -> Unit,
34
    modifier: Modifier = Modifier,
35
    enabled: Boolean = true,
36
    shape: Shape = MaterialTheme.shapes.small,
37
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
38
    elevation: ButtonElevation? = null,
39
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder,
40
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
41
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
42
    content: @Composable RowScope.() -> Unit
43
)
44

45
/**
46
 * Material Design text button variant
47
 */
48
@Composable
49
fun TextButton(
50
    onClick: () -> Unit,
51
    modifier: Modifier = Modifier,
52
    enabled: Boolean = true,
53
    shape: Shape = MaterialTheme.shapes.small,
54
    colors: ButtonColors = ButtonDefaults.textButtonColors(),
55
    elevation: ButtonElevation? = null,
56
    border: BorderStroke? = null,
57
    contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
58
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
59
    content: @Composable RowScope.() -> Unit
60
)
61

62
/**
63
 * Material Design card component
64
 */
65
@Composable
66
fun Card(
67
    modifier: Modifier = Modifier,
68
    shape: Shape = MaterialTheme.shapes.medium,
69
    colors: CardColors = CardDefaults.cardColors(),
70
    elevation: CardElevation = CardDefaults.cardElevation(),
71
    border: BorderStroke? = null,
72
    content: @Composable ColumnScope.() -> Unit
73
)
74

75
/**
76
 * Material Design elevated card variant
77
 */
78
@Composable
79
fun ElevatedCard(
80
    modifier: Modifier = Modifier,
81
    shape: Shape = MaterialTheme.shapes.medium,
82
    colors: CardColors = CardDefaults.elevatedCardColors(),
83
    elevation: CardElevation = CardDefaults.elevatedCardElevation(),
84
    border: BorderStroke? = null,
85
    content: @Composable ColumnScope.() -> Unit
86
)
87
```
88

89
**Usage Examples:**
90

91
```kotlin
92
// Basic button usage
93
Button(
94
    onClick = { /* Handle click */ },
95
    modifier = Modifier.padding(8.dp)
96
) {
97
    Text("Click Me")
98
}
99

100
// Button variants
101
Row(
102
    horizontalArrangement = Arrangement.spacedBy(8.dp)
103
) {
104
    Button(onClick = { }) { Text("Filled") }
105
    OutlinedButton(onClick = { }) { Text("Outlined") }
106
    TextButton(onClick = { }) { Text("Text") }
107
}
108

109
// Material card with content
110
Card(
111
    modifier = Modifier
112
        .fillMaxWidth()
113
        .padding(16.dp),
114
    elevation = CardDefaults.cardElevation(defaultElevation = 6.dp)
115
) {
116
    Column(
117
        modifier = Modifier.padding(16.dp)
118
    ) {
119
        Text(
120
            text = "Card Title",
121
            style = MaterialTheme.typography.headlineSmall
122
        )
123
        Text(
124
            text = "Card content goes here",
125
            style = MaterialTheme.typography.bodyMedium
126
        )
127
    }
128
}
129
```
130

131
### Text Input Components
132

133
Material Design text input components with various styles and validation support.
134

135
```kotlin { .api }
136
/**
137
 * Material Design text field component
138
 */
139
@Composable
140
fun TextField(
141
    value: String,
142
    onValueChange: (String) -> Unit,
143
    modifier: Modifier = Modifier,
144
    enabled: Boolean = true,
145
    readOnly: Boolean = false,
146
    textStyle: TextStyle = LocalTextStyle.current,
147
    label: (@Composable () -> Unit)? = null,
148
    placeholder: (@Composable () -> Unit)? = null,
149
    leadingIcon: (@Composable () -> Unit)? = null,
150
    trailingIcon: (@Composable () -> Unit)? = null,
151
    prefix: (@Composable () -> Unit)? = null,
152
    suffix: (@Composable () -> Unit)? = null,
153
    supportingText: (@Composable () -> Unit)? = null,
154
    isError: Boolean = false,
155
    visualTransformation: VisualTransformation = VisualTransformation.None,
156
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
157
    keyboardActions: KeyboardActions = KeyboardActions.Default,
158
    singleLine: Boolean = false,
159
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
160
    minLines: Int = 1,
161
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
162
    shape: Shape = TextFieldDefaults.shape,
163
    colors: TextFieldColors = TextFieldDefaults.colors()
164
)
165

166
/**
167
 * Material Design outlined text field variant
168
 */
169
@Composable
170
fun OutlinedTextField(
171
    value: String,
172
    onValueChange: (String) -> Unit,
173
    modifier: Modifier = Modifier,
174
    enabled: Boolean = true,
175
    readOnly: Boolean = false,
176
    textStyle: TextStyle = LocalTextStyle.current,
177
    label: (@Composable () -> Unit)? = null,
178
    placeholder: (@Composable () -> Unit)? = null,
179
    leadingIcon: (@Composable () -> Unit)? = null,
180
    trailingIcon: (@Composable () -> Unit)? = null,
181
    prefix: (@Composable () -> Unit)? = null,
182
    suffix: (@Composable () -> Unit)? = null,
183
    supportingText: (@Composable () -> Unit)? = null,
184
    isError: Boolean = false,
185
    visualTransformation: VisualTransformation = VisualTransformation.None,
186
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
187
    keyboardActions: KeyboardActions = KeyboardActions.Default,
188
    singleLine: Boolean = false,
189
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
190
    minLines: Int = 1,
191
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
192
    shape: Shape = OutlinedTextFieldDefaults.shape,
193
    colors: TextFieldColors = OutlinedTextFieldDefaults.colors()
194
)
195
```
196

197
**Usage Examples:**
198

199
```kotlin
200
// Basic text field
201
var text by remember { mutableStateOf("") }
202

203
TextField(
204
    value = text,
205
    onValueChange = { text = it },
206
    label = { Text("Enter text") },
207
    modifier = Modifier.fillMaxWidth()
208
)
209

210
// Text field with validation
211
var email by remember { mutableStateOf("") }
212
val isValidEmail = email.contains("@")
213

214
OutlinedTextField(
215
    value = email,
216
    onValueChange = { email = it },
217
    label = { Text("Email") },
218
    isError = !isValidEmail && email.isNotEmpty(),
219
    supportingText = {
220
        if (!isValidEmail && email.isNotEmpty()) {
221
            Text("Please enter a valid email address")
222
        }
223
    },
224
    leadingIcon = {
225
        Icon(Icons.Default.Email, contentDescription = null)
226
    }
227
)
228
```
229

230
### Selection Controls
231

232
Material Design selection components including checkboxes, radio buttons, and switches.
233

234
```kotlin { .api }
235
/**
236
 * Material Design checkbox component
237
 */
238
@Composable
239
fun Checkbox(
240
    checked: Boolean,
241
    onCheckedChange: ((Boolean) -> Unit)?,
242
    modifier: Modifier = Modifier,
243
    enabled: Boolean = true,
244
    colors: CheckboxColors = CheckboxDefaults.colors(),
245
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
246
)
247

248
/**
249
 * Material Design radio button component
250
 */
251
@Composable
252
fun RadioButton(
253
    selected: Boolean,
254
    onClick: (() -> Unit)?,
255
    modifier: Modifier = Modifier,
256
    enabled: Boolean = true,
257
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
258
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
259
)
260

261
/**
262
 * Material Design switch component
263
 */
264
@Composable
265
fun Switch(
266
    checked: Boolean,
267
    onCheckedChange: ((Boolean) -> Unit)?,
268
    modifier: Modifier = Modifier,
269
    thumbContent: (@Composable () -> Unit)? = null,
270
    enabled: Boolean = true,
271
    colors: SwitchColors = SwitchDefaults.colors(),
272
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
273
)
274

275
/**
276
 * Material Design slider component
277
 */
278
@Composable
279
fun Slider(
280
    value: Float,
281
    onValueChange: (Float) -> Unit,
282
    modifier: Modifier = Modifier,
283
    enabled: Boolean = true,
284
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
285
    steps: Int = 0,
286
    onValueChangeFinished: (() -> Unit)? = null,
287
    colors: SliderColors = SliderDefaults.colors(),
288
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
289
)
290
```
291

292
### Material Theming System
293

294
Comprehensive theming system for Material Design applications.
295

296
```kotlin { .api }
297
/**
298
 * Material Design theme provider
299
 */
300
@Composable
301
fun MaterialTheme(
302
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
303
    shapes: Shapes = MaterialTheme.shapes,
304
    typography: Typography = MaterialTheme.typography,
305
    content: @Composable () -> Unit
306
)
307

308
/**
309
 * Material Design color scheme
310
 */
311
@Immutable
312
data class ColorScheme(
313
    val primary: Color,
314
    val onPrimary: Color,
315
    val primaryContainer: Color,
316
    val onPrimaryContainer: Color,
317
    val secondary: Color,
318
    val onSecondary: Color,
319
    val secondaryContainer: Color,
320
    val onSecondaryContainer: Color,
321
    val tertiary: Color,
322
    val onTertiary: Color,
323
    val tertiaryContainer: Color,
324
    val onTertiaryContainer: Color,
325
    val error: Color,
326
    val onError: Color,
327
    val errorContainer: Color,
328
    val onErrorContainer: Color,
329
    val background: Color,
330
    val onBackground: Color,
331
    val surface: Color,
332
    val onSurface: Color,
333
    val surfaceVariant: Color,
334
    val onSurfaceVariant: Color,
335
    val outline: Color,
336
    val outlineVariant: Color,
337
    val scrim: Color,
338
    val inverseSurface: Color,
339
    val inverseOnSurface: Color,
340
    val inversePrimary: Color,
341
    val surfaceDim: Color,
342
    val surfaceBright: Color,
343
    val surfaceContainerLowest: Color,
344
    val surfaceContainerLow: Color,
345
    val surfaceContainer: Color,
346
    val surfaceContainerHigh: Color,
347
    val surfaceContainerHighest: Color
348
)
349

350
/**
351
 * Material Design typography scale
352
 */
353
@Immutable
354
data class Typography(
355
    val displayLarge: TextStyle,
356
    val displayMedium: TextStyle,
357
    val displaySmall: TextStyle,
358
    val headlineLarge: TextStyle,
359
    val headlineMedium: TextStyle,
360
    val headlineSmall: TextStyle,
361
    val titleLarge: TextStyle,
362
    val titleMedium: TextStyle,
363
    val titleSmall: TextStyle,
364
    val bodyLarge: TextStyle,
365
    val bodyMedium: TextStyle,
366
    val bodySmall: TextStyle,
367
    val labelLarge: TextStyle,
368
    val labelMedium: TextStyle,
369
    val labelSmall: TextStyle
370
)
371

372
/**
373
 * Material Design shape system
374
 */
375
@Immutable
376
data class Shapes(
377
    val extraSmall: CornerBasedShape,
378
    val small: CornerBasedShape,
379
    val medium: CornerBasedShape,
380
    val large: CornerBasedShape,
381
    val extraLarge: CornerBasedShape
382
)
383
```
384

385
**Usage Examples:**
386

387
```kotlin
388
// Custom Material theme
389
val CustomColorScheme = lightColorScheme(
390
    primary = Color(0xFF6750A4),
391
    secondary = Color(0xFF625B71),
392
    tertiary = Color(0xFF7D5260)
393
)
394

395
MaterialTheme(
396
    colorScheme = CustomColorScheme,
397
    typography = Typography(
398
        headlineLarge = TextStyle(
399
            fontSize = 32.sp,
400
            lineHeight = 40.sp,
401
            fontWeight = FontWeight.Bold
402
        )
403
    )
404
) {
405
    // App content with custom theme
406
    MyApp()
407
}
408

409
// Using theme values
410
@Composable
411
fun ThemedComponent() {
412
    Surface(
413
        color = MaterialTheme.colorScheme.primary,
414
        contentColor = MaterialTheme.colorScheme.onPrimary,
415
        shape = MaterialTheme.shapes.medium
416
    ) {
417
        Text(
418
            text = "Themed Text",
419
            style = MaterialTheme.typography.headlineSmall,
420
            modifier = Modifier.padding(16.dp)
421
        )
422
    }
423
}
424
```
425

426
### Application Structure
427

428
Components for organizing Material Design application structure.
429

430
```kotlin { .api }
431
/**
432
 * Material Design scaffold providing app structure
433
 */
434
@Composable
435
fun Scaffold(
436
    modifier: Modifier = Modifier,
437
    topBar: @Composable () -> Unit = {},
438
    bottomBar: @Composable () -> Unit = {},
439
    snackbarHost: @Composable () -> Unit = {},
440
    floatingActionButton: @Composable () -> Unit = {},
441
    floatingActionButtonPosition: FabPosition = FabPosition.End,
442
    containerColor: Color = MaterialTheme.colorScheme.background,
443
    contentColor: Color = contentColorFor(containerColor),
444
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
445
    content: @Composable (PaddingValues) -> Unit
446
)
447

448
/**
449
 * Material Design top app bar
450
 */
451
@Composable
452
fun TopAppBar(
453
    title: @Composable () -> Unit,
454
    modifier: Modifier = Modifier,
455
    navigationIcon: @Composable () -> Unit = {},
456
    actions: @Composable RowScope.() -> Unit = {},
457
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
458
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
459
    scrollBehavior: TopAppBarScrollBehavior? = null
460
)
461

462
/**
463
 * Material Design floating action button
464
 */
465
@Composable
466
fun FloatingActionButton(
467
    onClick: () -> Unit,
468
    modifier: Modifier = Modifier,
469
    shape: Shape = FloatingActionButtonDefaults.shape,
470
    containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
471
    contentColor: Color = contentColorFor(containerColor),
472
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
473
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
474
    content: @Composable () -> Unit
475
)
476
```
477

478
### Material Icons
479

480
Built-in icon system for Material Design applications.
481

482
```kotlin { .api }
483
/**
484
 * Material Design icons collections
485
 */
486
object Icons {
487
    object Default {
488
        val Add: ImageVector
489
        val ArrowBack: ImageVector
490
        val ArrowForward: ImageVector
491
        val Check: ImageVector
492
        val Clear: ImageVector
493
        val Close: ImageVector
494
        val Delete: ImageVector
495
        val Done: ImageVector
496
        val Edit: ImageVector
497
        val Email: ImageVector
498
        val Favorite: ImageVector
499
        val Home: ImageVector
500
        val Info: ImageVector
501
        val KeyboardArrowDown: ImageVector
502
        val KeyboardArrowUp: ImageVector
503
        val List: ImageVector
504
        val LocationOn: ImageVector
505
        val Menu: ImageVector
506
        val MoreVert: ImageVector
507
        val Notifications: ImageVector
508
        val Person: ImageVector
509
        val Phone: ImageVector
510
        val Place: ImageVector
511
        val PlayArrow: ImageVector
512
        val Refresh: ImageVector
513
        val Search: ImageVector
514
        val Settings: ImageVector
515
        val Share: ImageVector
516
        val Star: ImageVector
517
        val ThumbUp: ImageVector
518
        val Warning: ImageVector
519
    }
520
    
521
    object Filled {
522
        // Filled variants of icons
523
    }
524
    
525
    object Outlined {
526
        // Outlined variants of icons
527
    }
528
    
529
    object Rounded {
530
        // Rounded variants of icons
531
    }
532
    
533
    object Sharp {
534
        // Sharp variants of icons
535
    }
536
    
537
    object TwoTone {
538
        // Two-tone variants of icons
539
    }
540
}
541

542
/**
543
 * Composable for displaying Material icons
544
 */
545
@Composable
546
fun Icon(
547
    imageVector: ImageVector,
548
    contentDescription: String?,
549
    modifier: Modifier = Modifier,
550
    tint: Color = LocalContentColor.current
551
)
552
```
553

554
## Required Imports
555

556
```kotlin
557
// Core Material components
558
import androidx.compose.material.*
559
import androidx.compose.material3.*
560

561
// Material theming
562
import androidx.compose.material.MaterialTheme
563
import androidx.compose.material3.MaterialTheme
564

565
// Material icons
566
import androidx.compose.material.icons.Icons
567
import androidx.compose.material.icons.filled.*
568
import androidx.compose.material.icons.outlined.*
569
```