Android Compose

Jetpack Compose views under One.Android

Jetpack Compose views under One.Android, drawn by Material 3.

Layout nodes such as Column, Row, Box, cards, chips, and icon buttons take Compose children.
Leaves such as Text, Icon, Button, Switch, TextField, and Slider take none.
Controls are controlled: a value, a change callback, and a revision for external resets.
Every view throws outside an Android build, including on web. Keep them in an Android branch or an .android.tsx file.

Usage

import { useState } from 'react'
import { One } from 'one'

export function Settings() {
  const [on, setOn] = useState(true)

  return (
    <One.Android.Card composeStyle={{ padding: 16 }}>
      <One.Android.Switch label="Airplane mode" isOn={on} onIsOnChange={setOn} />
    </One.Android.Card>
  )
}

Shared props

Every node takes these. A node inside a Compose tree styles through composeStyle; style applies only at the root of the tree.

Props	Type	Description
`children`ReactNodeCompose children, on layout nodes.	ReactNode	Compose children, on layout nodes.
`accessibilityRole`ComposeAccessibilityRolebutton, switch, checkbox, radio, header, text, adjustable, alert, or progressbar.	ComposeAccessibilityRole	button, switch, checkbox, radio, header, text, adjustable, alert, or progressbar.
`style`StyleProp<ViewStyle>React Native style, at the root of a Compose tree only.	StyleProp<ViewStyle>	React Native style, at the root of a Compose tree only.
`composeStyle`ComposeStyleCompose modifiers. See below.	ComposeStyle	Compose modifiers. See below.

Nodes also take accessibilityLabel, accessibilityState, accessibilityValue, and testID.

ComposeStyle	Type	Description
`backgroundColor`ColorValueThe fill behind the node.	ColorValue	The fill behind the node.
`foregroundColor`ColorValueThe content color, such as an icon tint.	ColorValue	The content color, such as an icon tint.
`padding`numberPadding on every side, in dp.	number	Padding on every side, in dp.
`paddingTop`numberTop padding, in dp.	number	Top padding, in dp.
`paddingRight`numberRight padding, in dp.	number	Right padding, in dp.
`paddingBottom`numberBottom padding, in dp.	number	Bottom padding, in dp.
`paddingLeft`numberLeft padding, in dp.	number	Left padding, in dp.
`width`numberA fixed width, in dp.	number	A fixed width, in dp.
`height`numberA fixed height, in dp.	number	A fixed height, in dp.
`fillMaxWidth`booleanFills the parent width.	boolean	Fills the parent width.
`fillMaxHeight`booleanFills the parent height.	boolean	Fills the parent height.
`weight`numberA share of the free space in a Row or Column.	number	A share of the free space in a Row or Column.
`cornerRadius`numberRounds the node, in dp.	number	Rounds the node, in dp.
`opacity`numberFrom 0 to 1.	number	From 0 to 1.
`borderColor`ColorValueThe border color.	ColorValue	The border color.
`borderWidth`numberThe border width, in dp.	number	The border width, in dp.

Column, Row, Box

One.Android.Column stacks children vertically, Row horizontally, and Box layers them.

Column	Type	Description
`horizontalAlignment`ComposeHorizontalAlignment = "start"start, centerHorizontally, or end.	ComposeHorizontalAlignment = "start"	start, centerHorizontally, or end.
`verticalArrangement`ComposeVerticalArrangement = "top"top, center, bottom, spaceBetween, spaceAround, or spaceEvenly.	ComposeVerticalArrangement = "top"	top, center, bottom, spaceBetween, spaceAround, or spaceEvenly.
`spacing`numberThe gap between children, in dp.	number	The gap between children, in dp.

Row	Type	Description
`verticalAlignment`ComposeVerticalAlignment = "top"top, centerVertically, or bottom.	ComposeVerticalAlignment = "top"	top, centerVertically, or bottom.
`horizontalArrangement`ComposeHorizontalArrangement = "start"start, center, end, spaceBetween, spaceAround, or spaceEvenly.	ComposeHorizontalArrangement = "start"	start, center, end, spaceBetween, spaceAround, or spaceEvenly.
`spacing`numberThe gap between children, in dp.	number	The gap between children, in dp.

Box	Type	Description
`contentAlignment`ComposeContentAlignmentWhere children sit: topStart through bottomEnd, or top, bottom, start, end.	ComposeContentAlignment	Where children sit: topStart through bottomEnd, or top, bottom, start, end.

One.Android.FlowRow wraps children across rows.

FlowRow	Type	Description
`horizontalArrangement`ComposeHorizontalArrangement \| Readonly<{ spacedBy: number }> = "start"A Row arrangement, or a fixed gap in dp.	ComposeHorizontalArrangement \| Readonly<{ spacedBy: number }> = "start"	A Row arrangement, or a fixed gap in dp.
`verticalArrangement`ComposeVerticalArrangement \| Readonly<{ spacedBy: number }> = "top"A Column arrangement, or a fixed gap between rows in dp.	ComposeVerticalArrangement \| Readonly<{ spacedBy: number }> = "top"	A Column arrangement, or a fixed gap between rows in dp.

One.Android.Spacer takes the shared props only. As a direct child of a Row or Column with composeStyle={{ weight: 1 }} it takes the free space; with width or height it is a fixed gap. Any other direct child takes a positive weight the same way.

Text

Props	Type	Description
`text (required)`stringThe text.	string	The text.
`fontSize`numberThe size in sp. The theme body size when unset.	number	The size in sp. The theme body size when unset.
`fontWeight`ComposeFontWeightthin, extraLight, light, normal, medium, semiBold, bold, extraBold, or black.	ComposeFontWeight	thin, extraLight, light, normal, medium, semiBold, bold, extraBold, or black.
`textAlign`ComposeTextAlignunspecified, left, right, center, justify, start, or end.	ComposeTextAlign	unspecified, left, right, center, justify, start, or end.
`maxLines`numberThe most lines shown.	number	The most lines shown.

Icon

One.Android.Icon draws a Material Symbol. See Android Icons. For an icon on every platform, use One.UI.Icon.

Buttons

One.Android.Button shows a label with an optional leading icon.

Button	Type	Description
`label (required)`stringThe title.	string	The title.
`onPress`() => voidRuns when tapped.	() => void	Runs when tapped.
`variant`ComposeButtonVariant = "filled"filled, tonal, elevated, outlined, or text.	ComposeButtonVariant = "filled"	filled, tonal, elevated, outlined, or text.
`tone`ComposeButtonTone = "default"default, or danger for the error colors.	ComposeButtonTone = "default"	default, or danger for the error colors.
`icon`ComposeIconNameA Material Symbol before the label.	ComposeIconName	A Material Symbol before the label.
`iconFilled`boolean = falseUses the filled icon font.	boolean = false	Uses the filled icon font.
`disabled`boolean = falseDims the button and ignores taps.	boolean = false	Dims the button and ignores taps.

IconButton, FilledIconButton, FilledTonalIconButton, and OutlinedIconButton wrap an Icon child.

IconButton	Type	Description
`children (required)`ReactNodeThe Icon.	ReactNode	The Icon.
`onClick`() => voidRuns when tapped.	() => void	Runs when tapped.
`enabled`booleanfalse dims the button and ignores taps.	boolean	false dims the button and ignores taps.
`colors`ComposeIconButtonColorsContainer and content colors, enabled and disabled.	ComposeIconButtonColors	Container and content colors, enabled and disabled.

FloatingActionButton, SmallFloatingActionButton, and LargeFloatingActionButton take an Icon in their .Icon slot. ExtendedFloatingActionButton also takes Text in .Text.

FloatingActionButton	Type	Description
`children (required)`ReactNodeThe .Icon and, when extended, .Text slots.	ReactNode	The .Icon and, when extended, .Text slots.
`containerColor`ColorValueThe button color. The theme when unset.	ColorValue	The button color. The theme when unset.
`onClick`() => voidRuns when tapped.	() => void	Runs when tapped.

ExtendedFloatingActionButton adds expanded, which shows or hides its text.

ToggleButton, IconToggleButton, FilledIconToggleButton, and OutlinedIconToggleButton are the Material 3 toggles.

ToggleButton	Type	Description
`children (required)`ReactNodeThe content, such as an Icon.	ReactNode	The content, such as an Icon.
`checked (required)`booleanWhether the toggle is on.	boolean	Whether the toggle is on.
`onCheckedChange`(checked: boolean) => voidA tap, with the new value.	(checked: boolean) => void	A tap, with the new value.
`enabled`boolean = truefalse dims the toggle and ignores taps.	boolean = true	false dims the toggle and ignores taps.
`colors`ComposeToggleButtonColorsContainer and content colors, normal, checked, and disabled.	ComposeToggleButtonColors	Container and content colors, normal, checked, and disabled.
`revision`number = 0Increase with a new checked to reset it from outside.	number = 0	Increase with a new checked to reset it from outside.

Segmented buttons

SingleChoiceSegmentedButtonRow and MultiChoiceSegmentedButtonRow hold SegmentedButton children. In a single choice row, pass selected and onClick; in a multiple choice row, pass checked and onCheckedChange.

SegmentedButton	Type	Description
`children (required)`ReactNodeThe segment label.	ReactNode	The segment label.
`selected`booleanWhether the segment is chosen, in a single choice row.	boolean	Whether the segment is chosen, in a single choice row.
`onClick`() => voidA tap, in a single choice row.	() => void	A tap, in a single choice row.
`checked`booleanWhether the segment is on, in a multiple choice row.	boolean	Whether the segment is on, in a multiple choice row.
`onCheckedChange`(checked: boolean) => voidA tap, in a multiple choice row.	(checked: boolean) => void	A tap, in a multiple choice row.
`enabled`boolean = truefalse dims the segment and ignores taps.	boolean = true	false dims the segment and ignores taps.
`colors`ComposeSegmentedButtonColorsBorder, content, and container colors, active, inactive, and disabled.	ComposeSegmentedButtonColors	Border, content, and container colors, active, inactive, and disabled.
`revision`number = 0Increase with a new checked to reset it from outside.	number = 0	Increase with a new checked to reset it from outside.

Switch

Props	Type	Description
`isOn (required)`booleanWhether the switch is on.	boolean	Whether the switch is on.
`onIsOnChange (required)`(value: boolean) => voidA flip, with the new value.	(value: boolean) => void	A flip, with the new value.
`label`string = ""Text before the switch. The whole row toggles.	string = ""	Text before the switch. The whole row toggles.
`disabled`boolean = falseDims the switch and ignores taps.	boolean = false	Dims the switch and ignores taps.
`colors`ComposeSwitchColorsThumb, track, border, and icon colors for each state.	ComposeSwitchColors	Thumb, track, border, and icon colors for each state.
`revision`number = 0Increase with a new isOn to reset it from outside.	number = 0	Increase with a new isOn to reset it from outside.

Checkbox, RadioButton

Without a callback, each is read only. Omitted colors use the Material theme.

Checkbox	Type	Description
`value (required)`booleanWhether the box is checked.	boolean	Whether the box is checked.
`onCheckedChange`(value: boolean) => voidA tap, with the new value.	(value: boolean) => void	A tap, with the new value.
`disabled`boolean = falseDims the box and ignores taps.	boolean = false	Dims the box and ignores taps.
`revision`number = 0Increase with a new value to reset it from outside.	number = 0	Increase with a new value to reset it from outside.
`colors`Readonly<{ checkedColor?: ColorValue disabledCheckedColor?: ColorValue uncheckedColor?: ColorValue disabledUncheckedColor?: ColorValue checkmarkColor?: ColorValue }>Box and checkmark colors.	Readonly<{ checkedColor?: ColorValue disabledCheckedColor?: ColorValue uncheckedColor?: ColorValue disabledUncheckedColor?: ColorValue checkmarkColor?: ColorValue }>	Box and checkmark colors.

RadioButton	Type	Description
`selected (required)`booleanWhether the button is chosen.	boolean	Whether the button is chosen.
`onClick`() => voidA tap. Set selected yourself.	() => void	A tap. Set selected yourself.
`disabled`boolean = falseDims the button and ignores taps.	boolean = false	Dims the button and ignores taps.
`colors`Readonly<{ selectedColor?: ColorValue unselectedColor?: ColorValue disabledSelectedColor?: ColorValue disabledUnselectedColor?: ColorValue }>Ring and dot colors.	Readonly<{ selectedColor?: ColorValue unselectedColor?: ColorValue disabledSelectedColor?: ColorValue disabledUnselectedColor?: ColorValue }>	Ring and dot colors.

Cards, Surface

Card, ElevatedCard, and OutlinedCard wrap children in the Material 3 card surfaces. ElevatedCard takes no border. Without one, Card has no border and OutlinedCard uses the theme outline.

Card	Type	Description
`colors`ComposeCardColors{ containerColor, contentColor }.	ComposeCardColors	{ containerColor, contentColor }.
`elevation`numberThe shadow depth in dp. Zero or more.	number	The shadow depth in dp. Zero or more.
`border`ComposeCardBorder{ width, color }, width in dp, 1 by default.	ComposeCardBorder	{ width, color }, width in dp, 1 by default.

One.Android.Surface is a Material 3 surface. Round it with composeStyle.cornerRadius. With onClick it is clickable, with selected and onClick selectable, and with checked and onCheckedChange toggleable.

Surface	Type	Description
`color`ColorValueThe surface color.	ColorValue	The surface color.
`contentColor`ColorValueThe color of content on it.	ColorValue	The color of content on it.
`tonalElevation`numberTints the surface by depth, in dp.	number	Tints the surface by depth, in dp.
`shadowElevation`numberThe shadow depth, in dp.	number	The shadow depth, in dp.
`border`ComposeCardBorder{ width, color }.	ComposeCardBorder	{ width, color }.
`enabled`boolean = truefalse ignores taps.	boolean = true	false ignores taps.
`selected`booleanMakes it selectable, with onClick.	boolean	Makes it selectable, with onClick.
`checked`booleanMakes it toggleable, with onCheckedChange.	boolean	Makes it toggleable, with onCheckedChange.
`onClick`() => voidRuns when tapped.	() => void	Runs when tapped.
`onCheckedChange`(checked: boolean) => voidA tap, with the new checked value.	(checked: boolean) => void	A tap, with the new checked value.
`revision`number = 0Increase with a new checked to reset it from outside.	number = 0	Increase with a new checked to reset it from outside.

ListItem

One.Android.ListItem is a Material 3 row. Put Compose content in its .HeadlineContent slot, and optionally .OverlineContent, .SupportingContent, .LeadingContent, and .TrailingContent.

Props	Type	Description
`colors`ComposeListItemColorsContainer and per slot content colors.	ComposeListItemColors	Container and per slot content colors.
`tonalElevation`numberTints the row by depth, in dp.	number	Tints the row by depth, in dp.
`shadowElevation`numberThe shadow depth, in dp.	number	The shadow depth, in dp.

Dividers

HorizontalDivider and VerticalDivider draw Material 3 lines. Give a vertical divider a height through its parent or composeStyle.

Props	Type	Description
`thickness`numberThe line width in dp.	number	The line width in dp.
`color`ColorValueThe line color. The theme when unset.	ColorValue	The line color. The theme when unset.

Badges

One.Android.Badge is a dot, or a count when it has Compose children. One.Android.BadgedBox puts a Badge from its .Badge slot at the top end of its content; with no slot it shows a dot.

Badge	Type	Description
`containerColor`ColorValueThe badge color.	ColorValue	The badge color.
`contentColor`ColorValueThe count color.	ColorValue	The count color.

Chips

AssistChip, FilterChip, InputChip, and SuggestionChip are the Material 3 chips. Each takes its label in a .Label slot. AssistChip and FilterChip also have .LeadingIcon and .TrailingIcon, InputChip has .Avatar and .TrailingIcon, and SuggestionChip has .Icon.

Every chip takes enabled, onClick, elevation in dp, border ({ width, color }), and colors. A tap calls onClick; set the next selected yourself.

FilterChip	Type	Description
`selected (required)`booleanWhether the filter is on.	boolean	Whether the filter is on.
`colors`ComposeFilterChipColorsContainer, label, and icon colors, normal and selected.	ComposeFilterChipColors	Container, label, and icon colors, normal and selected.

InputChip	Type	Description
`selected`boolean = falseWhether the chip is selected.	boolean = false	Whether the chip is selected.
`colors`ComposeInputChipColorsContainer, label, and icon colors, normal and selected.	ComposeInputChipColors	Container, label, and icon colors, normal and selected.

AssistChip colors are containerColor, labelColor, leadingIconContentColor, and trailingIconContentColor. SuggestionChip colors are containerColor, labelColor, and iconContentColor.

TextField

One.Android.TextField edits text, a string or a native state handle from useNativeState. For a field on every platform, use One.UI.TextInput.

Props	Type	Description
`text (required)`string \| NativeState<string>The text, or a native state handle.	string \| NativeState<string>	The text, or a native state handle.
`onTextChange (required)`(value: string) => voidAn edit, with the new text.	(value: string) => void	An edit, with the new text.
`revision`number = 0Increase with a new text to reset it from outside.	number = 0	Increase with a new text to reset it from outside.
`label`stringThe floating label.	string	The floating label.
`placeholder`stringShown while empty.	string	Shown while empty.
`disabled`boolean = falseDims the field and blocks editing.	boolean = false	Dims the field and blocks editing.
`variant`ComposeTextFieldVariant = "filled"filled or outlined.	ComposeTextFieldVariant = "filled"	filled or outlined.
`keyboardType`ComposeTextFieldKeyboardType = "default"default, number, decimal, email, password, phone, or url.	ComposeTextFieldKeyboardType = "default"	default, number, decimal, email, password, phone, or url.
`secureText`boolean = falseHides the text.	boolean = false	Hides the text.
`focused`booleanWhether the field has focus, controlled.	boolean	Whether the field has focus, controlled.
`focusRevision`number = 0Increase with a new focused to apply it.	number = 0	Increase with a new focused to apply it.
`onFocusChange`(focused: boolean) => voidFocus moved.	(focused: boolean) => void	Focus moved.
`imeAction`ComposeTextFieldImeActionThe keyboard action: default, none, go, search, send, previous, next, or done.	ComposeTextFieldImeAction	The keyboard action: default, none, go, search, send, previous, next, or done.
`onSubmit`() => voidThe keyboard action key was pressed.	() => void	The keyboard action key was pressed.
`maxLength`numberThe most characters allowed.	number	The most characters allowed.
`multiline`boolean = falseAllows line breaks.	boolean = false	Allows line breaks.
`capitalization`ComposeTextFieldCapitalizationnone, characters, words, or sentences.	ComposeTextFieldCapitalization	none, characters, words, or sentences.
`autoCorrect`booleanWhether the keyboard corrects words.	boolean	Whether the keyboard corrects words.
`textAlign`ComposeTextAlignHow the text aligns.	ComposeTextAlign	How the text aligns.

Slider

Props	Type	Description
`value (required)`numberThe current value.	number	The current value.
`onValueChange (required)`(value: number) => voidA drag, with the new value.	(value: number) => void	A drag, with the new value.
`revision`number = 0Increase with a new value to reset it from outside.	number = 0	Increase with a new value to reset it from outside.
`minimumValue`number = 0The low end of the track.	number = 0	The low end of the track.
`maximumValue`number = 1The high end of the track.	number = 1	The high end of the track.
`lowerLimit`numberThe lowest the thumb may go. The track still spans the full range.	number	The lowest the thumb may go. The track still spans the full range.
`upperLimit`numberThe highest the thumb may go.	number	The highest the thumb may go.
`step`number = 0The increment. 0 is continuous.	number = 0	The increment. 0 is continuous.
`disabled`boolean = falseDims the slider and ignores drags.	boolean = false	Dims the slider and ignores drags.
`colors`Readonly<{ thumbColor?: ColorValue activeTrackColor?: ColorValue inactiveTrackColor?: ColorValue activeTickColor?: ColorValue inactiveTickColor?: ColorValue }>Thumb, track, and tick colors.	Readonly<{ thumbColor?: ColorValue activeTrackColor?: ColorValue inactiveTrackColor?: ColorValue activeTickColor?: ColorValue inactiveTickColor?: ColorValue }>	Thumb, track, and tick colors.

DatePicker, TimePicker

One.Android.DatePicker is the Material 3 calendar and One.Android.TimePicker is the clock dial. Both are controlled by a Date. DatePicker changes the calendar day in the device time zone and keeps the time of day. TimePicker changes the hour and minute, keeps the day, and sets seconds to zero.

const [when, setWhen] = useState(() => new Date())

<One.Android.DatePicker
  selection={when}
  onSelectionChange={setWhen}
  minimumDate={new Date(2026, 0, 1)}
/>
<One.Android.TimePicker selection={when} onSelectionChange={setWhen} is24Hour />

DatePicker	Type	Description
`selection (required)`DateThe selected day.	Date	The selected day.
`onSelectionChange (required)`(value: Date) => voidA tapped or typed day, with the time of day kept.	(value: Date) => void	A tapped or typed day, with the time of day kept.
`revision`number = 0Increase with a new value to reset it from outside.	number = 0	Increase with a new value to reset it from outside.
`minimumDate`DateThe earliest selectable day. Earlier days and years are disabled.	Date	The earliest selectable day. Earlier days and years are disabled.
`maximumDate`DateThe latest selectable day.	Date	The latest selectable day.
`variant`'picker' \| 'input' = 'picker'The calendar grid or a text field.	'picker' \| 'input' = 'picker'	The calendar grid or a text field.
`showModeToggle`boolean = trueShows the button that switches variant.	boolean = true	Shows the button that switches variant.
`color`ColorValueTints the title, headline, selected day, and today border.	ColorValue	Tints the title, headline, selected day, and today border.
`colors`ComposeDatePickerColorsPer-element colors; these win over color.	ComposeDatePickerColors	Per-element colors; these win over color.

TimePicker	Type	Description
`selection (required)`DateThe selected time of day.	Date	The selected time of day.
`onSelectionChange (required)`(value: Date) => voidA new hour or minute, with the day kept.	(value: Date) => void	A new hour or minute, with the day kept.
`revision`number = 0Increase with a new value to reset it from outside.	number = 0	Increase with a new value to reset it from outside.
`is24Hour`booleanA 24 hour clock. Defaults to the device setting.	boolean	A 24 hour clock. Defaults to the device setting.
`variant`'picker' \| 'input' = 'picker'The clock dial or hour and minute fields.	'picker' \| 'input' = 'picker'	The clock dial or hour and minute fields.
`color`ColorValueTints the selector, selected field, and dial.	ColorValue	Tints the selector, selected field, and dial.
`colors`ComposeTimePickerColorsPer-element colors; these win over color.	ComposeTimePickerColors	Per-element colors; these win over color.

DatePickerDialog and TimePickerDialog take the same props without onSelectionChange and revision. Each opening starts from selection; the confirm button reports the chosen value.

DatePickerDialog, TimePickerDialog	Type	Description
`visible (required)`booleanWhether the dialog shows.	boolean	Whether the dialog shows.
`onConfirm (required)`(value: Date) => voidThe confirm button, with the chosen value.	(value: Date) => void	The confirm button, with the chosen value.
`onDismiss (required)`() => voidDismissed by the button, a tap outside, or back.	() => void	Dismissed by the button, a tap outside, or back.
`confirmLabel`stringThe confirm button title. Defaults to the system OK.	string	The confirm button title. Defaults to the system OK.
`dismissLabel`stringThe dismiss button title. Defaults to the system Cancel.	string	The dismiss button title. Defaults to the system Cancel.

AlertDialog, Dialog

One.Android.AlertDialog shows a confirmation while visible is true. One.Android.Dialog shows its children in a dialog window.

AlertDialog	Type	Description
`visible (required)`booleanWhether the dialog shows.	boolean	Whether the dialog shows.
`title`stringThe headline.	string	The headline.
`message`stringThe body text.	string	The body text.
`confirmLabel (required)`stringThe confirm button title.	string	The confirm button title.
`dismissLabel`stringThe dismiss button title. No button when unset.	string	The dismiss button title. No button when unset.
`onConfirm (required)`() => voidThe confirm button was tapped.	() => void	The confirm button was tapped.
`onDismiss (required)`() => voidDismissed by the button, a tap outside, or back.	() => void	Dismissed by the button, a tap outside, or back.

Dialog	Type	Description
`visible (required)`booleanWhether the dialog shows.	boolean	Whether the dialog shows.
`onDismiss (required)`() => voidA tap outside or back asked to close it.	() => void	A tap outside or back asked to close it.

Progress and loading

ProgressIndicator is circular unless variant says otherwise. LinearProgressIndicator, CircularProgressIndicator, LinearWavyProgressIndicator, and CircularWavyProgressIndicator fix the variant. Leave progress unset for an indeterminate indicator.

ProgressIndicator	Type	Description
`variant`ComposeProgressVariant = "circular"linear, circular, linearWavy, or circularWavy.	ComposeProgressVariant = "circular"	linear, circular, linearWavy, or circularWavy.
`progress`number \| nullFrom 0 to 1. Unset spins.	number \| null	From 0 to 1. Unset spins.
`color`ColorValueThe indicator color.	ColorValue	The indicator color.
`trackColor`ColorValueThe track color.	ColorValue	The track color.
`strokeCap`ComposeProgressStrokeCapround, butt, or square. Linear and circular.	ComposeProgressStrokeCap	round, butt, or square. Linear and circular.
`gapSize`numberThe gap between indicator and track, in dp.	number	The gap between indicator and track, in dp.
`strokeWidth`numberThe line width, in dp. Circular.	number	The line width, in dp. Circular.
`drawStopIndicator`ComposeProgressStopIndicatorThe end dot of a determinate linear bar: { color, strokeCap, stopSize }.	ComposeProgressStopIndicator	The end dot of a determinate linear bar: { color, strokeCap, stopSize }.
`stopSize`numberThe end dot size, in dp. Linear wavy.	number	The end dot size, in dp. Linear wavy.
`amplitude`numberThe wave height. Wavy.	number	The wave height. Wavy.
`wavelength`numberThe wave length, in dp. Wavy.	number	The wave length, in dp. Wavy.
`waveSpeed`numberHow fast the wave moves. Wavy.	number	How fast the wave moves. Wavy.

LoadingIndicator and ContainedLoadingIndicator are the Material 3 expressive loading shapes, with progress and color; the contained one adds containerColor.

LoadingIndicator	Type	Description
`progress`number \| nullFrom 0 to 1. Unset animates.	number \| null	From 0 to 1. Unset animates.
`color`ColorValueThe shape color.	ColorValue	The shape color.

PreviousZoom Transitions

Menus

Edit this page on GitHub.