0
# Core Components
1

2
Essential Material Design components for building iOS interfaces with consistent Material Design styling and iOS-optimized behavior.
3

4
## Capabilities
5

6
### Text
7

8
Primary text display component with Material theming and iOS-specific typography adaptations.
9

10
```kotlin { .api }
11
/**
12
 * High-level element that displays text and provides semantics / accessibility information
13
 * @param text The text to be displayed
14
 * @param modifier Modifier to be applied to this layout node
15
 * @param color Color to apply to the text
16
 * @param fontSize The size of glyphs to use when painting the text
17
 * @param fontStyle The typeface variant to use when drawing the letters
18
 * @param fontWeight The typeface thickness to use when painting the text
19
 * @param fontFamily The font family to be used when rendering the text
20
 * @param letterSpacing The amount of space to add between each letter
21
 * @param textDecoration The decorations to paint on the text
22
 * @param textAlign The alignment of the text within the lines of the paragraph
23
 * @param lineHeight Line height for the Paragraph in TextUnit unit
24
 * @param overflow How visual overflow should be handled
25
 * @param softWrap Whether the text should break at soft line breaks
26
 * @param maxLines An optional maximum number of lines for the text to span
27
 * @param style Style configuration for the text such as color, font, line height etc
28
 */
29
@Composable
30
fun Text(
31
    text: String,
32
    modifier: Modifier = Modifier,
33
    color: Color = Color.Unspecified,
34
    fontSize: TextUnit = TextUnit.Unspecified,
35
    fontStyle: FontStyle? = null,
36
    fontWeight: FontWeight? = null,
37
    fontFamily: FontFamily? = null,
38
    letterSpacing: TextUnit = TextUnit.Unspecified,
39
    textDecoration: TextDecoration? = null,
40
    textAlign: TextAlign? = null,
41
    lineHeight: TextUnit = TextUnit.Unspecified,
42
    overflow: TextOverflow = TextOverflow.Clip,
43
    softWrap: Boolean = true,
44
    maxLines: Int = Int.MAX_VALUE,
45
    style: TextStyle = LocalTextStyle.current
46
)
47
```
48

49
**Usage Examples:**
50

51
```kotlin
52
// Basic text
53
Text("Hello, iOS!")
54

55
// Styled text with Material theming
56
Text(
57
    text = "Material Design on iOS",
58
    style = MaterialTheme.typography.h5,
59
    color = MaterialTheme.colors.primary
60
)
61

62
// Text with overflow handling
63
Text(
64
    text = "This is a very long text that might overflow",
65
    maxLines = 2,
66
    overflow = TextOverflow.Ellipsis
67
)
68
```
69

70
### Button
71

72
Standard Material button with elevation, theming, and iOS-optimized touch feedback.
73

74
```kotlin { .api }
75
/**
76
 * Material Design button. Buttons allow users to take actions and make choices with a single tap
77
 * @param onClick Called when this button is clicked
78
 * @param modifier Modifier to be applied to this button
79
 * @param enabled Controls the enabled state of this button
80
 * @param elevation ButtonElevation used to resolve the elevation for this button
81
 * @param shape Defines the shape of this button's container, border and shadow
82
 * @param border The border to draw around the container of this button
83
 * @param colors ButtonColors that will be used to resolve the colors for this button
84
 * @param contentPadding The spacing values to apply internally between the container and the content
85
 * @param content The content displayed on the button
86
 */
87
@Composable
88
fun Button(
89
    onClick: () -> Unit,
90
    modifier: Modifier = Modifier,
91
    enabled: Boolean = true,
92
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
93
    shape: Shape = MaterialTheme.shapes.small,
94
    border: BorderStroke? = null,
95
    colors: ButtonColors = ButtonDefaults.buttonColors(),
96
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
97
    content: @Composable RowScope.() -> Unit
98
)
99
```
100

101
**Usage Examples:**
102

103
```kotlin
104
// Standard button
105
Button(onClick = { println("Button clicked") }) {
106
    Text("Click Me")
107
}
108

109
// Button with icon
110
Button(onClick = { /* handle click */ }) {
111
    Icon(Icons.Default.Add, contentDescription = null)
112
    Spacer(Modifier.width(8.dp))
113
    Text("Add Item")
114
}
115

116
// Disabled button
117
Button(
118
    onClick = { },
119
    enabled = false
120
) {
121
    Text("Disabled")
122
}
123

124
// Custom styled button
125
Button(
126
    onClick = { },
127
    colors = ButtonDefaults.buttonColors(
128
        backgroundColor = MaterialTheme.colors.secondary
129
    ),
130
    elevation = ButtonDefaults.elevation(8.dp)
131
) {
132
    Text("Custom Button")
133
}
134
```
135

136
### TextButton
137

138
Flat button without background elevation, following Material Design guidelines with iOS adaptations.
139

140
```kotlin { .api }
141
/**
142
 * Material Design text button. Text buttons are typically used for less important actions
143
 * @param onClick Called when this button is clicked
144
 * @param modifier Modifier to be applied to this button
145
 * @param enabled Controls the enabled state of this button
146
 * @param elevation ButtonElevation used to resolve the elevation for this button
147
 * @param shape Defines the shape of this button's container and border
148
 * @param border The border to draw around the container of this button
149
 * @param colors ButtonColors that will be used to resolve the colors for this button
150
 * @param contentPadding The spacing values to apply internally between the container and the content
151
 * @param content The content displayed on the button
152
 */
153
@Composable
154
fun TextButton(
155
    onClick: () -> Unit,
156
    modifier: Modifier = Modifier,
157
    enabled: Boolean = true,
158
    elevation: ButtonElevation? = null,
159
    shape: Shape = MaterialTheme.shapes.small,
160
    border: BorderStroke? = null,
161
    colors: ButtonColors = ButtonDefaults.textButtonColors(),
162
    contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
163
    content: @Composable RowScope.() -> Unit
164
)
165
```
166

167
### OutlinedButton
168

169
Button with outlined border styling, providing visual hierarchy without background fill.
170

171
```kotlin { .api }
172
/**
173
 * Material Design outlined button. Outlined buttons are medium-emphasis buttons
174
 * @param onClick Called when this button is clicked
175
 * @param modifier Modifier to be applied to this button
176
 * @param enabled Controls the enabled state of this button
177
 * @param elevation ButtonElevation used to resolve the elevation for this button
178
 * @param shape Defines the shape of this button's container and border
179
 * @param border The border to draw around the container of this button
180
 * @param colors ButtonColors that will be used to resolve the colors for this button
181
 * @param contentPadding The spacing values to apply internally between the container and the content
182
 * @param content The content displayed on the button
183
 */
184
@Composable
185
fun OutlinedButton(
186
    onClick: () -> Unit,
187
    modifier: Modifier = Modifier,
188
    enabled: Boolean = true,
189
    elevation: ButtonElevation? = null,
190
    shape: Shape = MaterialTheme.shapes.small,
191
    border: BorderStroke? = ButtonDefaults.outlinedBorder,
192
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
193
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
194
    content: @Composable RowScope.() -> Unit
195
)
196
```
197

198
### IconButton
199

200
Clickable icon container with Material theming and iOS-optimized touch targets.
201

202
```kotlin { .api }
203
/**
204
 * Material Design icon button. Icon buttons allow users to take actions and make choices with a single tap
205
 * @param onClick Called when this icon button is clicked
206
 * @param modifier Modifier to be applied to this icon button
207
 * @param enabled Controls the enabled state of this icon button
208
 * @param content The content of this icon button, typically an Icon
209
 */
210
@Composable
211
fun IconButton(
212
    onClick: () -> Unit,
213
    modifier: Modifier = Modifier,
214
    enabled: Boolean = true,
215
    content: @Composable () -> Unit
216
)
217
```
218

219
**Usage Examples:**
220

221
```kotlin
222
// Basic icon button
223
IconButton(onClick = { /* handle click */ }) {
224
    Icon(Icons.Default.Menu, contentDescription = "Menu")
225
}
226

227
// Icon button with custom tint
228
IconButton(onClick = { /* handle back navigation */ }) {
229
    Icon(
230
        Icons.AutoMirrored.Filled.ArrowBack,
231
        contentDescription = "Back",
232
        tint = MaterialTheme.colors.onSurface
233
    )
234
}
235
```
236

237
### FloatingActionButton
238

239
Primary action button with Material elevation and iOS-optimized positioning.
240

241
```kotlin { .api }
242
/**
243
 * Material Design floating action button. FABs are used for primary actions on a screen
244
 * @param onClick Called when this FAB is clicked
245
 * @param modifier Modifier to be applied to this FAB
246
 * @param shape Defines the shape of this FAB's container and shadow
247
 * @param backgroundColor The background color. Use Color.Transparent to have no color
248
 * @param contentColor The preferred content color provided by this FAB to its children
249
 * @param elevation FloatingActionButtonElevation used to resolve the elevation for this FAB
250
 * @param content The content of this FAB - typically an Icon
251
 */
252
@Composable
253
fun FloatingActionButton(
254
    onClick: () -> Unit,
255
    modifier: Modifier = Modifier,
256
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
257
    backgroundColor: Color = MaterialTheme.colors.secondary,
258
    contentColor: Color = contentColorFor(backgroundColor),
259
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
260
    content: @Composable () -> Unit
261
)
262
```
263

264
**Usage Examples:**
265

266
```kotlin
267
// Standard FAB
268
FloatingActionButton(
269
    onClick = { /* add new item */ }
270
) {
271
    Icon(Icons.Default.Add, contentDescription = "Add")
272
}
273

274
// Extended FAB with text
275
ExtendedFloatingActionButton(
276
    text = { Text("Create") },
277
    onClick = { /* create action */ },
278
    icon = { Icon(Icons.Default.Add, contentDescription = null) }
279
)
280
```
281

282
### Surface
283

284
Foundation component providing Material elevation, color, shape, and iOS-specific visual adaptations.
285

286
```kotlin { .api }
287
/**
288
 * Material surface. Surface is the central metaphor in material design
289
 * @param modifier Modifier to be applied to the Surface
290
 * @param shape Defines the shape of this Surface's container and shadow
291
 * @param color The background color. Use Color.Transparent to have no color
292
 * @param contentColor The preferred content color provided by this Surface to its children
293
 * @param elevation The size of the shadow below the surface
294
 * @param border Optional border to draw on top of the surface
295
 * @param content The content to be displayed on top of the surface
296
 */
297
@Composable
298
fun Surface(
299
    modifier: Modifier = Modifier,
300
    shape: Shape = RectangleShape,
301
    color: Color = MaterialTheme.colors.surface,
302
    contentColor: Color = contentColorFor(color),
303
    elevation: Dp = 0.dp,
304
    border: BorderStroke? = null,
305
    content: @Composable () -> Unit
306
)
307
```
308

309
**Usage Examples:**
310

311
```kotlin
312
// Basic surface with elevation
313
Surface(
314
    modifier = Modifier.padding(16.dp),
315
    elevation = 4.dp,
316
    shape = RoundedCornerShape(8.dp)
317
) {
318
    Column(
319
        modifier = Modifier.padding(16.dp)
320
    ) {
321
        Text("Surface Content")
322
        Text("With elevation and rounded corners")
323
    }
324
}
325

326
// Clickable surface
327
Surface(
328
    modifier = Modifier.clickable { /* handle click */ },
329
    elevation = 2.dp,
330
    color = MaterialTheme.colors.primary
331
) {
332
    Text(
333
        text = "Clickable Surface",
334
        modifier = Modifier.padding(16.dp),
335
        color = MaterialTheme.colors.onPrimary
336
    )
337
}
338
```
339

340
### Card
341

342
Elevated surface with Material card styling and iOS-appropriate shadow rendering.
343

344
```kotlin { .api }
345
/**
346
 * Material Design card. Cards contain content and actions about a single subject
347
 * @param modifier Modifier to be applied to this Card
348
 * @param shape Defines the shape of this card's container and shadow
349
 * @param backgroundColor The background color
350
 * @param contentColor The preferred content color provided by this Card to its children
351
 * @param border Optional border to draw on top of the card
352
 * @param elevation The size of the shadow below the card
353
 * @param content The content to be displayed inside the card
354
 */
355
@Composable
356
fun Card(
357
    modifier: Modifier = Modifier,
358
    shape: Shape = MaterialTheme.shapes.medium,
359
    backgroundColor: Color = MaterialTheme.colors.surface,
360
    contentColor: Color = contentColorFor(backgroundColor),
361
    border: BorderStroke? = null,
362
    elevation: Dp = 1.dp,
363
    content: @Composable () -> Unit
364
)
365
```
366

367
**Usage Examples:**
368

369
```kotlin
370
// Basic card
371
Card(
372
    modifier = Modifier
373
        .fillMaxWidth()
374
        .padding(16.dp)
375
) {
376
    Column(
377
        modifier = Modifier.padding(16.dp)
378
    ) {
379
        Text(
380
            text = "Card Title",
381
            style = MaterialTheme.typography.h6
382
        )
383
        Spacer(modifier = Modifier.height(8.dp))
384
        Text("Card content goes here")
385
    }
386
}
387

388
// Clickable card with elevation
389
Card(
390
    modifier = Modifier
391
        .fillMaxWidth()
392
        .clickable { /* handle card click */ },
393
    elevation = 8.dp
394
) {
395
    // Card content
396
}
397
```
398

399
### OutlinedCard
400

401
Material 3 card with outlined border instead of elevation, providing a modern flat design alternative.
402

403
```kotlin { .api }
404
/**
405
 * Material 3 outlined card with border instead of elevation for modern flat design
406
 * @param onClick Called when this card is clicked
407
 * @param modifier Modifier to be applied to this card
408
 * @param enabled Controls the enabled state of this card
409
 * @param shape Defines the shape of this card's container and border
410
 * @param colors CardColors that will be used to resolve the colors for this card
411
 * @param elevation CardElevation used to resolve the elevation for this card
412
 * @param border The border to draw around the container of this card
413
 * @param interactionSource The MutableInteractionSource representing the stream of interactions
414
 * @param content The content to be displayed inside the card
415
 */
416
@OptIn(ExperimentalMaterial3Api::class)
417
@Composable
418
fun OutlinedCard(
419
    onClick: () -> Unit,
420
    modifier: Modifier = Modifier,
421
    enabled: Boolean = true,
422
    shape: Shape = CardDefaults.outlinedShape,
423
    colors: CardColors = CardDefaults.outlinedCardColors(),
424
    elevation: CardElevation = CardDefaults.outlinedCardElevation(),
425
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
426
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
427
    content: @Composable ColumnScope.() -> Unit
428
)
429

430
/**
431
 * Material 3 outlined card without click handling
432
 * @param modifier Modifier to be applied to this card
433
 * @param shape Defines the shape of this card's container and border
434
 * @param colors CardColors that will be used to resolve the colors for this card
435
 * @param elevation CardElevation used to resolve the elevation for this card
436
 * @param border The border to draw around the container of this card
437
 * @param content The content to be displayed inside the card
438
 */
439
@Composable
440
fun OutlinedCard(
441
    modifier: Modifier = Modifier,
442
    shape: Shape = CardDefaults.outlinedShape,
443
    colors: CardColors = CardDefaults.outlinedCardColors(),
444
    elevation: CardElevation = CardDefaults.outlinedCardElevation(),
445
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
446
    content: @Composable ColumnScope.() -> Unit
447
)
448

449
object CardDefaults {
450
    fun outlinedCardColors(
451
        containerColor: Color = Color.Transparent,
452
        contentColor: Color = Color.Unspecified,
453
        disabledContainerColor: Color = Color.Transparent,
454
        disabledContentColor: Color = Color.Unspecified
455
    ): CardColors
456
    
457
    fun outlinedCardElevation(
458
        defaultElevation: Dp = 0.dp,
459
        pressedElevation: Dp = 0.dp,
460
        focusedElevation: Dp = 0.dp,
461
        hoveredElevation: Dp = 0.dp,
462
        draggedElevation: Dp = 0.dp,
463
        disabledElevation: Dp = 0.dp
464
    ): CardElevation
465
    
466
    fun outlinedCardBorder(): BorderStroke
467
    
468
    val outlinedShape: Shape
469
}
470

471
interface CardColors
472
interface CardElevation
473
```
474

475
**Usage Examples:**
476

477
```kotlin
478
// Basic outlined card
479
OutlinedCard(
480
    modifier = Modifier
481
        .fillMaxWidth()
482
        .padding(16.dp)
483
) {
484
    Column(
485
        modifier = Modifier.padding(16.dp)
486
    ) {
487
        Text(
488
            text = "Outlined Card",
489
            style = MaterialTheme.typography.h6
490
        )
491
        Spacer(modifier = Modifier.height(8.dp))
492
        Text("This card uses a border instead of elevation for a modern flat design.")
493
    }
494
}
495

496
// Clickable outlined card with custom colors
497
OutlinedCard(
498
    onClick = { /* handle card click */ },
499
    modifier = Modifier
500
        .fillMaxWidth()
501
        .padding(16.dp),
502
    colors = CardDefaults.outlinedCardColors(
503
        containerColor = MaterialTheme.colorScheme.surfaceVariant,
504
        contentColor = MaterialTheme.colorScheme.onSurfaceVariant
505
    ),
506
    border = BorderStroke(
507
        width = 2.dp,
508
        color = MaterialTheme.colorScheme.primary
509
    )
510
) {
511
    Column(
512
        modifier = Modifier.padding(16.dp)
513
    ) {
514
        Icon(
515
            imageVector = Icons.Default.Star,
516
            contentDescription = null,
517
            tint = MaterialTheme.colorScheme.primary
518
        )
519
        Spacer(modifier = Modifier.height(8.dp))
520
        Text("Premium Feature")
521
        Text(
522
            text = "Tap to learn more",
523
            style = MaterialTheme.typography.bodySmall
524
        )
525
    }
526
}
527
```
528

529
### Divider
530

531
Visual separator with Material theming and iOS-appropriate styling.
532

533
```kotlin { .api }
534
/**
535
 * Material Design divider. A divider is a thin line that groups content in lists and layouts
536
 * @param modifier Modifier to be applied to the divider
537
 * @param color Color of the divider line
538
 * @param thickness The thickness of the divider line
539
 * @param startIndent The offset of this line from the start of this layout
540
 */
541
@Composable
542
fun Divider(
543
    modifier: Modifier = Modifier,
544
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
545
    thickness: Dp = 1.dp,
546
    startIndent: Dp = 0.dp
547
)
548
```
549

550
**Usage Examples:**
551

552
```kotlin
553
// Basic divider
554
Column {
555
    Text("Item 1")
556
    Divider()
557
    Text("Item 2")
558
    Divider()
559
    Text("Item 3")
560
}
561

562
// Divider with custom styling
563
Divider(
564
    color = MaterialTheme.colors.primary,
565
    thickness = 2.dp,
566
    startIndent = 16.dp
567
)
568
```
569

570
## Component Defaults and Utilities
571

572
```kotlin { .api }
573
object ButtonDefaults {
574
    fun elevation(
575
        defaultElevation: Dp = 2.dp,
576
        pressedElevation: Dp = 8.dp,
577
        disabledElevation: Dp = 0.dp
578
    ): ButtonElevation
579
    
580
    fun buttonColors(
581
        backgroundColor: Color = MaterialTheme.colors.primary,
582
        contentColor: Color = contentColorFor(backgroundColor),
583
        disabledBackgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f),
584
        disabledContentColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
585
    ): ButtonColors
586
    
587
    val ContentPadding: PaddingValues
588
    val TextButtonContentPadding: PaddingValues
589
    val outlinedBorder: BorderStroke?
590
}
591

592
object FloatingActionButtonDefaults {
593
    fun elevation(
594
        defaultElevation: Dp = 6.dp,
595
        pressedElevation: Dp = 12.dp
596
    ): FloatingActionButtonElevation
597
}
598

599
const val DividerAlpha = 0.12f
600
}
601

602
// Progress indicators
603
object ProgressIndicatorDefaults {
604
    val StrokeWidth: Dp = 4.dp
605
    const val IndicatorBackgroundOpacity: Float = 0.24f
606
}
607

608
// Snackbar defaults
609
object SnackbarDefaults {
610
    val backgroundColor: Color
611
        @Composable
612
        get() = MaterialTheme.colors.onSurface
613
    
614
    val primaryActionColor: Color
615
        @Composable  
616
        get() = MaterialTheme.colors.primaryVariant
617
}
618

619
// Type definitions for button components
620
@Stable
621
interface ButtonElevation {
622
    @Composable
623
    fun elevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
624
}
625

626
@Stable
627
interface ButtonColors {
628
    @Composable
629
    fun backgroundColor(enabled: Boolean): State<Color>
630
    
631
    @Composable
632
    fun contentColor(enabled: Boolean): State<Color>
633
}
634

635
@Stable
636
interface FloatingActionButtonElevation {
637
    @Composable
638
    fun elevation(interactionSource: InteractionSource): State<Dp>
639
}
640

641
// Content alpha values for iOS
642
object ContentAlpha {
643
    const val high: Float = 1.00f
644
    const val medium: Float = 0.74f
645
    const val disabled: Float = 0.38f
646
}
647
```
648

649
### CircularProgressIndicator
650

651
Circular loading indicator with Material theming and iOS-optimized animations.
652

653
```kotlin { .api }
654
/**
655
 * Material Design circular progress indicator with iOS-appropriate animations
656
 * @param progress The progress value between 0.0 and 1.0, or null for indeterminate
657
 * @param modifier Modifier to be applied to this progress indicator
658
 * @param color The color of the progress indicator
659
 * @param strokeWidth The stroke width of the progress indicator
660
 */
661
@Composable
662
fun CircularProgressIndicator(
663
    progress: Float,
664
    modifier: Modifier = Modifier,
665
    color: Color = MaterialTheme.colors.primary,
666
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
667
)
668

669
@Composable
670
fun CircularProgressIndicator(
671
    modifier: Modifier = Modifier,
672
    color: Color = MaterialTheme.colors.primary,
673
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
674
)
675
```
676

677
**Usage Examples:**
678

679
```kotlin
680
// Indeterminate progress
681
CircularProgressIndicator()
682

683
// Determinate progress
684
CircularProgressIndicator(
685
    progress = 0.75f,
686
    color = MaterialTheme.colors.secondary
687
)
688

689
// Custom size and stroke
690
CircularProgressIndicator(
691
    progress = progress,
692
    modifier = Modifier.size(64.dp),
693
    strokeWidth = 6.dp
694
)
695
```
696

697
### LinearProgressIndicator
698

699
Linear progress bar with Material theming and iOS-appropriate styling.
700

701
```kotlin { .api }
702
/**
703
 * Material Design linear progress indicator with iOS-style presentation
704
 * @param progress The progress value between 0.0 and 1.0, or null for indeterminate
705
 * @param modifier Modifier to be applied to this progress indicator
706
 * @param color The color of the progress indicator
707
 * @param backgroundColor The background color of the progress indicator
708
 */
709
@Composable
710
fun LinearProgressIndicator(
711
    progress: Float,
712
    modifier: Modifier = Modifier,
713
    color: Color = MaterialTheme.colors.primary,
714
    backgroundColor: Color = color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity)
715
)
716

717
@Composable
718
fun LinearProgressIndicator(
719
    modifier: Modifier = Modifier,
720
    color: Color = MaterialTheme.colors.primary,
721
    backgroundColor: Color = color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity)
722
)
723
```
724

725
**Usage Examples:**
726

727
```kotlin
728
// Indeterminate linear progress
729
LinearProgressIndicator(
730
    modifier = Modifier.fillMaxWidth()
731
)
732

733
// Determinate linear progress
734
LinearProgressIndicator(
735
    progress = downloadProgress,
736
    modifier = Modifier.fillMaxWidth()
737
)
738

739
// Custom colored progress
740
LinearProgressIndicator(
741
    progress = uploadProgress,
742
    modifier = Modifier.fillMaxWidth(),
743
    color = MaterialTheme.colors.secondary,
744
    backgroundColor = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
745
)
746
```
747

748
### Snackbar
749

750
Temporary message display component with iOS-appropriate positioning and animations.
751

752
```kotlin { .api }
753
/**
754
 * Material Design snackbar with iOS safe area integration
755
 * @param snackbarData Data about the current snackbar to display
756
 * @param modifier Modifier to be applied to this snackbar
757
 * @param actionOnNewLine Whether the action should be displayed on a separate line
758
 * @param shape The shape of the snackbar
759
 * @param backgroundColor The background color of the snackbar
760
 * @param contentColor The content color of the snackbar
761
 * @param actionColor The color of the action text/button
762
 * @param elevation The elevation of the snackbar
763
 */
764
@Composable
765
fun Snackbar(
766
    snackbarData: SnackbarData,
767
    modifier: Modifier = Modifier,
768
    actionOnNewLine: Boolean = false,
769
    shape: Shape = MaterialTheme.shapes.small,
770
    backgroundColor: Color = SnackbarDefaults.backgroundColor,
771
    contentColor: Color = MaterialTheme.colors.surface,
772
    actionColor: Color = SnackbarDefaults.primaryActionColor,
773
    elevation: Dp = 6.dp
774
)
775
```
776

777
### SnackbarHost
778

779
Container for displaying snackbars with proper iOS safe area handling.
780

781
```kotlin { .api }
782
/**
783
 * Host component for displaying snackbars with iOS positioning
784
 * @param hostState State controlling snackbar display
785
 * @param modifier Modifier to be applied to this host
786
 * @param snackbar The snackbar composable to display
787
 */
788
@Composable
789
fun SnackbarHost(
790
    hostState: SnackbarHostState,
791
    modifier: Modifier = Modifier,
792
    snackbar: @Composable (SnackbarData) -> Unit = { Snackbar(it) }
793
)
794

795
@Stable
796
class SnackbarHostState {
797
    suspend fun showSnackbar(
798
        message: String,
799
        actionLabel: String? = null,
800
        duration: SnackbarDuration = SnackbarDuration.Short
801
    ): SnackbarResult
802
}
803

804
interface SnackbarData {
805
    val message: String
806
    val actionLabel: String?
807
    fun performAction()
808
    fun dismiss()
809
}
810

811
enum class SnackbarDuration {
812
    Short, Long, Indefinite
813
}
814

815
enum class SnackbarResult {
816
    Dismissed, ActionPerformed
817
}
818
```
819

820
**Usage Examples:**
821

822
```kotlin
823
// Basic snackbar usage
824
val snackbarHostState = remember { SnackbarHostState() }
825
val scope = rememberCoroutineScope()
826

827
Scaffold(
828
    snackbarHost = { SnackbarHost(snackbarHostState) }
829
) { paddingValues ->
830
    Button(
831
        onClick = {
832
            scope.launch {
833
                snackbarHostState.showSnackbar("Hello, iOS!")
834
            }
835
        }
836
    ) {
837
        Text("Show Snackbar")
838
    }
839
}
840

841
// Snackbar with action
842
scope.launch {
843
    val result = snackbarHostState.showSnackbar(
844
        message = "Item deleted",
845
        actionLabel = "UNDO",
846
        duration = SnackbarDuration.Long
847
    )
848
    when (result) {
849
        SnackbarResult.ActionPerformed -> {
850
            // Handle undo
851
        }
852
        SnackbarResult.Dismissed -> {
853
            // Handle dismissal
854
        }
855
    }
856
}
857
```
858

859
### AlertDialog
860

861
Modal dialog for displaying important information and collecting user decisions with iOS-native appearance.
862

863
```kotlin { .api }
864
/**
865
 * Material Design alert dialog with iOS-optimized presentation
866
 * @param onDismissRequest Called when the user tries to dismiss the dialog
867
 * @param buttons The content of the dialog's buttons, usually arranged horizontally
868
 * @param modifier Modifier to be applied to this dialog
869
 * @param title The optional title of the dialog
870
 * @param text The optional text body of the dialog
871
 * @param shape Defines the shape of this dialog's container
872
 * @param backgroundColor The background color of the dialog
873
 * @param contentColor The preferred content color provided by this dialog to its children
874
 * @param properties DialogProperties for further customization
875
 */
876
@Composable
877
fun AlertDialog(
878
    onDismissRequest: () -> Unit,
879
    buttons: @Composable () -> Unit,
880
    modifier: Modifier = Modifier,
881
    title: (@Composable () -> Unit)? = null,
882
    text: (@Composable () -> Unit)? = null,
883
    shape: Shape = MaterialTheme.shapes.medium,
884
    backgroundColor: Color = MaterialTheme.colors.surface,
885
    contentColor: Color = contentColorFor(backgroundColor),
886
    properties: DialogProperties = DialogProperties()
887
)
888

889
/**
890
 * Material Design alert dialog with confirmButton and dismissButton
891
 * @param onDismissRequest Called when the user tries to dismiss the dialog
892
 * @param confirmButton The button which is meant to confirm a proposed action
893
 * @param modifier Modifier to be applied to this dialog
894
 * @param dismissButton The button which is meant to dismiss the dialog
895
 * @param title The optional title of the dialog
896
 * @param text The optional text body of the dialog
897
 * @param shape Defines the shape of this dialog's container
898
 * @param backgroundColor The background color of the dialog
899
 * @param contentColor The preferred content color provided by this dialog to its children
900
 * @param properties DialogProperties for further customization
901
 */
902
@Composable
903
fun AlertDialog(
904
    onDismissRequest: () -> Unit,
905
    confirmButton: @Composable () -> Unit,
906
    modifier: Modifier = Modifier,
907
    dismissButton: @Composable (() -> Unit)? = null,
908
    title: @Composable (() -> Unit)? = null,
909
    text: @Composable (() -> Unit)? = null,
910
    shape: Shape = MaterialTheme.shapes.medium,
911
    backgroundColor: Color = MaterialTheme.colors.surface,
912
    contentColor: Color = contentColorFor(backgroundColor),
913
    properties: DialogProperties = DialogProperties()
914
)
915

916
@Stable
917
class DialogProperties(
918
    val dismissOnBackPress: Boolean = true,
919
    val dismissOnClickOutside: Boolean = true,
920
    val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
921
    val usePlatformDefaultWidth: Boolean = true
922
)
923

924
enum class SecureFlagPolicy {
925
    Inherit, SecureOn, SecureOff
926
}
927
```
928

929
**Usage Examples:**
930

931
```kotlin
932
// Simple confirmation dialog
933
var showDialog by remember { mutableStateOf(false) }
934

935
if (showDialog) {
936
    AlertDialog(
937
        onDismissRequest = { showDialog = false },
938
        title = { Text("Confirm Action") },
939
        text = { Text("Are you sure you want to delete this item?") },
940
        confirmButton = {
941
            TextButton(
942
                onClick = {
943
                    showDialog = false
944
                    // Perform delete action
945
                }
946
            ) {
947
                Text("DELETE")
948
            }
949
        },
950
        dismissButton = {
951
            TextButton(
952
                onClick = { showDialog = false }
953
            ) {
954
                Text("CANCEL")
955
            }
956
        }
957
    )
958
}
959

960
// Custom content dialog
961
AlertDialog(
962
    onDismissRequest = { /* handle dismiss */ },
963
    buttons = {
964
        Row(
965
            modifier = Modifier.fillMaxWidth(),
966
            horizontalArrangement = Arrangement.End
967
        ) {
968
            TextButton(onClick = { /* handle cancel */ }) {
969
                Text("CANCEL")
970
            }
971
            Spacer(modifier = Modifier.width(8.dp))
972
            TextButton(onClick = { /* handle save */ }) {
973
                Text("SAVE")
974
            }
975
        }
976
    },
977
    title = { Text("Edit Profile") },
978
    text = {
979
        Column {
980
            TextField(
981
                value = name,
982
                onValueChange = { name = it },
983
                label = { Text("Name") }
984
            )
985
            Spacer(modifier = Modifier.height(8.dp))
986
            TextField(
987
                value = email,
988
                onValueChange = { email = it },
989
                label = { Text("Email") }
990
            )
991
        }
992
    }
993
)
994
```