0
# Material3 Components
1

2
Complete Material Design 3 component library providing buttons, text, cards, navigation elements, and input controls with full iOS UIKit x64 compatibility.
3

4
## Capabilities
5

6
### Buttons
7

8
Material3 button components with multiple variants and styling options.
9

10
```kotlin { .api }
11
/**
12
 * Primary Material3 button with filled background
13
 * @param onClick callback invoked when button is clicked
14
 * @param modifier modifier applied to the button
15
 * @param enabled whether the button is enabled
16
 * @param shape shape of the button
17
 * @param colors color configuration for the button
18
 * @param elevation elevation configuration for the button
19
 * @param border border configuration for the button
20
 * @param contentPadding padding applied to button content
21
 * @param interactionSource interaction source for handling interactions
22
 * @param content button content composable
23
 */
24
@Composable
25
fun Button(
26
    onClick: () -> Unit,
27
    modifier: Modifier = Modifier,
28
    enabled: Boolean = true,
29
    shape: Shape = ButtonDefaults.shape,
30
    colors: ButtonColors = ButtonDefaults.buttonColors(),
31
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
32
    border: BorderStroke? = null,
33
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
34
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
35
    content: @Composable RowScope.() -> Unit
36
)
37

38
/**
39
 * Outlined Material3 button with transparent background and border
40
 */
41
@Composable
42
fun OutlinedButton(
43
    onClick: () -> Unit,
44
    modifier: Modifier = Modifier,
45
    enabled: Boolean = true,
46
    shape: Shape = ButtonDefaults.outlinedShape,
47
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
48
    elevation: ButtonElevation? = null,
49
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder,
50
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
51
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
52
    content: @Composable RowScope.() -> Unit
53
)
54

55
/**
56
 * Text-only Material3 button with no background
57
 */
58
@Composable
59
fun TextButton(
60
    onClick: () -> Unit,
61
    modifier: Modifier = Modifier,
62
    enabled: Boolean = true,
63
    shape: Shape = ButtonDefaults.textShape,
64
    colors: ButtonColors = ButtonDefaults.textButtonColors(),
65
    elevation: ButtonElevation? = null,
66
    border: BorderStroke? = null,
67
    contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
68
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
69
    content: @Composable RowScope.() -> Unit
70
)
71

72
/**
73
 * Icon-only button for actions
74
 */
75
@Composable
76
fun IconButton(
77
    onClick: () -> Unit,
78
    modifier: Modifier = Modifier,
79
    enabled: Boolean = true,
80
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
81
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
82
    content: @Composable () -> Unit
83
)
84
```
85

86
**Usage Examples:**
87

88
```kotlin
89
import androidx.compose.material3.*
90
import androidx.compose.material.icons.Icons
91
import androidx.compose.material.icons.filled.Favorite
92

93
Column {
94
    Button(onClick = { /* action */ }) {
95
        Text("Primary Button")
96
    }
97
    
98
    OutlinedButton(onClick = { /* action */ }) {
99
        Text("Outlined Button")
100
    }
101
    
102
    TextButton(onClick = { /* action */ }) {
103
        Text("Text Button")
104
    }
105
    
106
    IconButton(onClick = { /* action */ }) {
107
        Icon(Icons.Default.Favorite, contentDescription = "Favorite")
108
    }
109
}
110
```
111

112
### Typography and Text
113

114
Material3 text components with typography integration.
115

116
```kotlin { .api }
117
/**
118
 * Material3 text component with typography integration
119
 * @param text the text to display
120
 * @param modifier modifier applied to the text
121
 * @param color color of the text
122
 * @param fontSize font size of the text
123
 * @param fontStyle font style (normal, italic)
124
 * @param fontWeight font weight (normal, bold, etc.)
125
 * @param fontFamily font family
126
 * @param letterSpacing spacing between letters
127
 * @param textDecoration text decoration (underline, strikethrough)
128
 * @param textAlign text alignment
129
 * @param lineHeight height of each line
130
 * @param overflow how to handle text overflow
131
 * @param softWrap whether text should break at soft line breaks
132
 * @param maxLines maximum number of lines
133
 * @param minLines minimum number of lines
134
 * @param onTextLayout callback for text layout information
135
 * @param style text style from Material3 typography
136
 */
137
@Composable
138
fun Text(
139
    text: String,
140
    modifier: Modifier = Modifier,
141
    color: Color = Color.Unspecified,
142
    fontSize: TextUnit = TextUnit.Unspecified,
143
    fontStyle: FontStyle? = null,
144
    fontWeight: FontWeight? = null,
145
    fontFamily: FontFamily? = null,
146
    letterSpacing: TextUnit = TextUnit.Unspecified,
147
    textDecoration: TextDecoration? = null,
148
    textAlign: TextAlign? = null,
149
    lineHeight: TextUnit = TextUnit.Unspecified,
150
    overflow: TextOverflow = TextOverflow.Clip,
151
    softWrap: Boolean = true,
152
    maxLines: Int = Int.MAX_VALUE,
153
    minLines: Int = 1,
154
    onTextLayout: (TextLayoutResult) -> Unit = {},
155
    style: TextStyle = MaterialTheme.typography.bodyLarge
156
)
157
```
158

159
**Usage Examples:**
160

161
```kotlin
162
Column {
163
    Text(
164
        text = "Display Large",
165
        style = MaterialTheme.typography.displayLarge
166
    )
167
    
168
    Text(
169
        text = "Headline Medium", 
170
        style = MaterialTheme.typography.headlineMedium,
171
        color = MaterialTheme.colorScheme.primary
172
    )
173
    
174
    Text(
175
        text = "Body text with custom color",
176
        style = MaterialTheme.typography.bodyMedium,
177
        color = MaterialTheme.colorScheme.onSurface
178
    )
179
}
180
```
181

182
### Cards
183

184
Material3 card components for containing related content.
185

186
```kotlin { .api }
187
/**
188
 * Material3 card component with elevation and Material theming
189
 * @param onClick optional click handler for making card clickable
190
 * @param modifier modifier applied to the card
191
 * @param enabled whether the card is enabled (for clickable cards)
192
 * @param shape shape of the card
193
 * @param colors color configuration for the card
194
 * @param elevation elevation configuration for the card
195
 * @param border border configuration for the card
196
 * @param interactionSource interaction source for handling interactions
197
 * @param content card content composable
198
 */
199
@Composable
200
fun Card(
201
    onClick: () -> Unit,
202
    modifier: Modifier = Modifier,
203
    enabled: Boolean = true,
204
    shape: Shape = CardDefaults.shape,
205
    colors: CardColors = CardDefaults.cardColors(),
206
    elevation: CardElevation = CardDefaults.cardElevation(),
207
    border: BorderStroke? = null,
208
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
209
    content: @Composable ColumnScope.() -> Unit
210
)
211

212
/**
213
 * Non-clickable Material3 card
214
 */
215
@Composable
216
fun Card(
217
    modifier: Modifier = Modifier,
218
    shape: Shape = CardDefaults.shape,
219
    colors: CardColors = CardDefaults.cardColors(),
220
    elevation: CardElevation = CardDefaults.cardElevation(),
221
    border: BorderStroke? = null,
222
    content: @Composable ColumnScope.() -> Unit
223
)
224

225
/**
226
 * Outlined Material3 card with border instead of elevation
227
 */
228
@Composable
229
fun OutlinedCard(
230
    onClick: () -> Unit,
231
    modifier: Modifier = Modifier,
232
    enabled: Boolean = true,
233
    shape: Shape = CardDefaults.outlinedShape,
234
    colors: CardColors = CardDefaults.outlinedCardColors(),
235
    elevation: CardElevation = CardDefaults.outlinedCardElevation(),
236
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
237
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
238
    content: @Composable ColumnScope.() -> Unit
239
)
240
```
241

242
**Usage Examples:**
243

244
```kotlin
245
LazyColumn {
246
    items(dataList) { item ->
247
        Card(
248
            modifier = Modifier
249
                .fillMaxWidth()
250
                .padding(8.dp),
251
            onClick = { /* handle click */ }
252
        ) {
253
            Column(modifier = Modifier.padding(16.dp)) {
254
                Text(
255
                    text = item.title,
256
                    style = MaterialTheme.typography.headlineSmall
257
                )
258
                Text(
259
                    text = item.description,
260
                    style = MaterialTheme.typography.bodyMedium,
261
                    color = MaterialTheme.colorScheme.onSurfaceVariant
262
                )
263
            }
264
        }
265
    }
266
}
267
```
268

269
### Navigation Components
270

271
Material3 navigation components for app structure and navigation.
272

273
```kotlin { .api }
274
/**
275
 * Material3 app structure component with app bars and content area
276
 * @param modifier modifier applied to the scaffold
277
 * @param topBar top app bar composable
278
 * @param bottomBar bottom navigation bar composable  
279
 * @param snackbarHost snackbar host for displaying snackbars
280
 * @param floatingActionButton floating action button
281
 * @param floatingActionButtonPosition position of the FAB
282
 * @param containerColor background color of the scaffold
283
 * @param contentColor content color for the scaffold
284
 * @param contentWindowInsets window insets for content
285
 * @param content main content composable receiving padding values
286
 */
287
@Composable
288
fun Scaffold(
289
    modifier: Modifier = Modifier,
290
    topBar: @Composable () -> Unit = {},
291
    bottomBar: @Composable () -> Unit = {},
292
    snackbarHost: @Composable () -> Unit = {},
293
    floatingActionButton: @Composable () -> Unit = {},
294
    floatingActionButtonPosition: FabPosition = FabPosition.End,
295
    containerColor: Color = MaterialTheme.colorScheme.background,
296
    contentColor: Color = contentColorFor(containerColor),
297
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
298
    content: @Composable (PaddingValues) -> Unit
299
)
300

301
/**
302
 * Material3 top app bar for navigation and actions
303
 */
304
@OptIn(ExperimentalMaterial3Api::class)
305
@Composable
306
fun TopAppBar(
307
    title: @Composable () -> Unit,
308
    modifier: Modifier = Modifier,
309
    navigationIcon: @Composable () -> Unit = {},
310
    actions: @Composable RowScope.() -> Unit = {},
311
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
312
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
313
    scrollBehavior: TopAppBarScrollBehavior? = null
314
)
315

316
/**
317
 * Material3 bottom navigation bar
318
 */
319
@Composable
320
fun NavigationBar(
321
    modifier: Modifier = Modifier,
322
    containerColor: Color = MaterialTheme.colorScheme.surface,
323
    contentColor: Color = MaterialTheme.colorScheme.onSurface,
324
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
325
    windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
326
    content: @Composable RowScope.() -> Unit
327
)
328

329
/**
330
 * Individual navigation item for NavigationBar
331
 */
332
@Composable
333
fun RowScope.NavigationBarItem(
334
    selected: Boolean,
335
    onClick: () -> Unit,
336
    icon: @Composable () -> Unit,
337
    modifier: Modifier = Modifier,
338
    enabled: Boolean = true,
339
    label: @Composable (() -> Unit)? = null,
340
    alwaysShowLabel: Boolean = true,
341
    colors: NavigationBarItemColors = NavigationBarDefaults.itemColors(),
342
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
343
)
344
```
345

346
**Usage Examples:**
347

348
```kotlin
349
val selectedTab = remember { mutableIntStateOf(0) }
350

351
Scaffold(
352
    topBar = {
353
        TopAppBar(
354
            title = { Text("My App") },
355
            navigationIcon = {
356
                IconButton(onClick = { /* handle back */ }) {
357
                    Icon(Icons.Default.ArrowBack, contentDescription = "Back")
358
                }
359
            },
360
            actions = {
361
                IconButton(onClick = { /* handle search */ }) {
362
                    Icon(Icons.Default.Search, contentDescription = "Search")
363
                }
364
            }
365
        )
366
    },
367
    bottomBar = {
368
        NavigationBar {
369
            NavigationBarItem(
370
                selected = selectedTab.intValue == 0,
371
                onClick = { selectedTab.intValue = 0 },
372
                icon = { Icon(Icons.Default.Home, contentDescription = null) },
373
                label = { Text("Home") }
374
            )
375
            NavigationBarItem(
376
                selected = selectedTab.intValue == 1,
377
                onClick = { selectedTab.intValue = 1 },
378
                icon = { Icon(Icons.Default.Settings, contentDescription = null) },
379
                label = { Text("Settings") }
380
            )
381
        }
382
    }
383
) { paddingValues ->
384
    // Main content
385
}
386
```
387

388
### Input Controls
389

390
Material3 input and selection components.
391

392
```kotlin { .api }
393
/**
394
 * Material3 checkbox for boolean selection
395
 * @param checked whether the checkbox is checked
396
 * @param onCheckedChange callback when checked state changes
397
 * @param modifier modifier applied to the checkbox
398
 * @param enabled whether the checkbox is enabled
399
 * @param colors color configuration for the checkbox
400
 * @param interactionSource interaction source for handling interactions
401
 */
402
@Composable
403
fun Checkbox(
404
    checked: Boolean,
405
    onCheckedChange: ((Boolean) -> Unit)?,
406
    modifier: Modifier = Modifier,
407
    enabled: Boolean = true,
408
    colors: CheckboxColors = CheckboxDefaults.colors(),
409
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
410
)
411

412
/**
413
 * Material3 radio button for single selection
414
 */
415
@Composable
416
fun RadioButton(
417
    selected: Boolean,
418
    onClick: (() -> Unit)?,
419
    modifier: Modifier = Modifier,
420
    enabled: Boolean = true,
421
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
422
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
423
)
424

425
/**
426
 * Material3 slider for continuous value selection
427
 */
428
@Composable
429
fun Slider(
430
    value: Float,
431
    onValueChange: (Float) -> Unit,
432
    modifier: Modifier = Modifier,
433
    enabled: Boolean = true,
434
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
435
    steps: Int = 0,
436
    onValueChangeFinished: (() -> Unit)? = null,
437
    colors: SliderColors = SliderDefaults.colors(),
438
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
439
)
440
```
441

442
**Usage Examples:**
443

444
```kotlin
445
Column {
446
    // Checkbox
447
    val checkedState = remember { mutableStateOf(false) }
448
    Row(
449
        modifier = Modifier.selectable(
450
            selected = checkedState.value,
451
            onClick = { checkedState.value = !checkedState.value }
452
        )
453
    ) {
454
        Checkbox(
455
            checked = checkedState.value,
456
            onCheckedChange = { checkedState.value = it }
457
        )
458
        Text("Enable notifications")
459
    }
460
    
461
    // Radio Button Group
462
    val selectedOption = remember { mutableStateOf("Option 1") }
463
    val options = listOf("Option 1", "Option 2", "Option 3")
464
    
465
    options.forEach { option ->
466
        Row(
467
            modifier = Modifier.selectable(
468
                selected = selectedOption.value == option,
469
                onClick = { selectedOption.value = option }
470
            )
471
        ) {
472
            RadioButton(
473
                selected = selectedOption.value == option,
474
                onClick = { selectedOption.value = option }
475
            )
476
            Text(option)
477
        }
478
    }
479
    
480
    // Slider
481
    val sliderValue = remember { mutableFloatStateOf(0.5f) }
482
    Text("Value: ${sliderValue.floatValue}")
483
    Slider(
484
        value = sliderValue.floatValue,
485
        onValueChange = { sliderValue.floatValue = it }
486
    )
487
}
488
```
489

490
### Layout and Container Components
491

492
Material3 layout and container components for organizing content.
493

494
```kotlin { .api }
495
/**
496
 * Material3 surface container with Material theming
497
 * @param onClick optional click handler for making surface clickable
498
 * @param modifier modifier applied to the surface
499
 * @param enabled whether the surface is enabled (for clickable surfaces)
500
 * @param shape shape of the surface
501
 * @param color background color of the surface
502
 * @param contentColor content color for the surface
503
 * @param tonalElevation tonal elevation for color overlay
504
 * @param shadowElevation shadow elevation for drop shadow
505
 * @param border border configuration for the surface
506
 * @param interactionSource interaction source for handling interactions
507
 * @param content surface content composable
508
 */
509
@Composable
510
fun Surface(
511
    onClick: () -> Unit,
512
    modifier: Modifier = Modifier,
513
    enabled: Boolean = true,
514
    shape: Shape = RectangleShape,
515
    color: Color = MaterialTheme.colorScheme.surface,
516
    contentColor: Color = contentColorFor(color),
517
    tonalElevation: Dp = 0.dp,
518
    shadowElevation: Dp = 0.dp,
519
    border: BorderStroke? = null,
520
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
521
    content: @Composable () -> Unit
522
)
523

524
/**
525
 * Non-clickable Material3 surface
526
 */
527
@Composable
528
fun Surface(
529
    modifier: Modifier = Modifier,
530
    shape: Shape = RectangleShape,
531
    color: Color = MaterialTheme.colorScheme.surface,
532
    contentColor: Color = contentColorFor(color),
533
    tonalElevation: Dp = 0.dp,
534
    shadowElevation: Dp = 0.dp,
535
    border: BorderStroke? = null,
536
    content: @Composable () -> Unit
537
)
538

539
/**
540
 * Horizontal divider for visual separation
541
 */
542
@Composable
543
fun HorizontalDivider(
544
    modifier: Modifier = Modifier,
545
    thickness: Dp = DividerDefaults.Thickness,
546
    color: Color = DividerDefaults.color
547
)
548
```
549

550
**Usage Examples:**
551

552
```kotlin
553
Surface(
554
    modifier = Modifier.fillMaxSize(),
555
    color = MaterialTheme.colorScheme.background
556
) {
557
    LazyColumn {
558
        items(dataList) { item ->
559
            Column {
560
                Text(
561
                    text = item.title,
562
                    modifier = Modifier.padding(16.dp)
563
                )
564
                HorizontalDivider()
565
            }
566
        }
567
    }
568
}
569
```