Skip to main content

Module components

gpui_kit_material

Module components 

Source
Expand description

Material components. Each module documents the M3 component it implements and what remains for M3 Expressive (docs/ROADMAP.md).

Structs§

AssistChip
M3 assist chip: a smart or automated action, with an optional primary leading icon.
Avatar
A circular avatar. See the module documentation.
Badge
An M3 badge.
BottomAppBar
The M3 bottom app bar: actions and an optional trailing FAB.
ButtonGroup
ButtonProgressPlayback
Persistent progress/loading presentation for one logical button.
ButtonTransitionInputs
Controlled presentation inputs for an unmounted logical button. disabled includes loading’s disabled presentation. Transient interaction is deliberately absent: sync uses resting hover/focus/pointer state.
ButtonTransitionPlayback
One logical button’s visual transitions, independent of virtual mounting. Clones share only samples/curves. No focus, pointer, hover, ripple, window, or queued callback is retained. Forward offscreen controlled input changes through sync; call it after updating the Material motion scheme/theme.
CalendarDay
One day of a calendar grid (.Building Blocks/Local M3 calendar cell).
CaptionButtons
The caption buttons over the trailing end of a title bar, above any dialog, or nothing where the system draws them. Render it once per window, as a child of the root; a super::TitleBar renders its own, so a window with one needs no other.
CaptionLabels
Accessible names of the caption buttons. The kit has no locale of its own, so there is no default: applications pass their translations.
CardSurface
Static Material card surface, without implicit padding or full width.
CarouselItem
One carousel item: caller content (e.g. an image) masked by the item, with an optional label and supporting text on large items.
ChoiceGroup
One single-choice question as connected ChoiceTiles under a section title: a radio group with roving focus. Tab enters at the selected choice; arrow keys, Home and End move focus among the available choices and select them, as a radio group does.
ChoiceTile
One choice in a connected group of tiles: tonal selection on the secondary container, a leading icon, the label with optional supporting text, a trailing status chip and a radio. An unavailable choice keeps its status chip at full strength.
CircularProgress
M3 Expressive circular progress indicator.
CircularProgressFrame
A circular arc’s start in clockwise degrees from three o’clock and its fraction.
CircularProgressPlayback
Caller-owned circular playback that survives virtual unmounting.
ClockDial
The 256dp clock face (.Building Blocks/Clock face): numbers, the hand and the selector. Interactive over a TimePickerState, or a static specimen of time.
ConnectedButtonGroup
DatePicker
An M3 date picker over a DatePickerState.
DatePickerLabels
Every caller-supplied string and formatter of a date picker. Nothing user-facing is hard-coded in the component; galleries and apps build this from their locale.
DatePickerState
A date picker’s state: selection, displayed month, view, mode and the keyboard cursor. Create it once per picker with cx.new and hand it to DatePicker.
ExposedDropdown
The M3 exposed dropdown menu: a text field that opens a menu of options.
ExtendedFab
An extended FAB: icon and visible label. expanded(false) collapses it to a FAB of the same height, the label clipping away while the padding and icon-label gap close on the default spatial spring (reduced motion jumps). A label-only FAB (ExtendedFab::label_only) has nothing to collapse to and stays extended.
Fab
A square FAB holding one icon. label names it for assistive technology.
FabMenu
FabMenuItem
One action of a FAB menu. Rendered on its own (e.g. a building-block specimen) it is the open item in its color; inside a menu it takes the menu’s color.
FeedLayout
A feed: a grid of items, as many columns as fit.
FeedMetrics
How a feed lays out in a given width: use it to virtualize a long feed.
FilterChip
M3 filter chip: a toggle among filter options. Selecting slides a check in before the label (or shows it in place of the leading icon).
FocusRing
Draw the M3 keyboard focus indicator (the button’s 3dp secondary ring, 2dp outside) around a component whose focus handle is internal. The wrapper observes descendants without adding a keyboard stop of its own, and shows the ring only for keyboard focus.
IconButton
An icon-only button. label names it for assistive technology.
InputChip
M3 input chip: a piece of information the person entered, with an optional leading icon or avatar and a remove icon.
Keyline
One keyline: an item’s left edge and width on screen.
Keylines
The keylines of one arrangement plus the number of focal (large) items.
LinearProgress
M3 Expressive linear progress indicator.
ListItem
One M3 list item. Strings come from the caller. Give it on_click to make the whole row a button; without one it is static content.
LoadingFrame
A sampled indicator: the shapes being morphed, how far, and the turn.
LoadingIndicator
M3 Expressive loading indicator.
MaterialBottomSheet
An M3 bottom sheet. Standard sheets dock to their parent’s bottom edge and leave the content interactive; modal ones present over the window. Dragging the sheet down past its nearest rest dismisses it; otherwise it snaps to the expanded or partial detent.
MaterialButton
Sized, shaped Material presentation; activation, keyboard and focus stay in Base.
MaterialCard
A Material card that can act and move: the CardSurface of its variant, optionally a GPUI Base button (on_click: hover and press state layers, the kit’s hover elevation, ripple, keyboard activation and the focus ring) and optionally draggable (the dragged state layer and elevation while the pointer carries it; on release it springs back to its place on the default spatial spring, or returns at once under reduced motion). The accessible label names the action.
MaterialCarousel
An M3 carousel. label names it for assistive technology.
MaterialCheckbox
Controlled tri-state M3 checkbox. Activation reports the next state: unchecked and indeterminate become checked, checked becomes unchecked.
MaterialDialog
An M3 dialog. Without MaterialDialog::modal it renders its container in place (a specimen); with it, it is a modal overlay over the window.
MaterialDivider
A separator without focus, activation, or intrinsic animation.
MaterialMenu
An M3 menu surface. Use MenuPopup to open it from a trigger.
MaterialMenuItem
One menu item.
MaterialRadio
Controlled M3 radio button. It has no visible label unless MaterialRadio::visible_label is set; its label is always its accessible name.
MaterialRadioGroup
A labelled set of MaterialRadios with one selection: Tab enters at the selected option; arrow keys, Home and End move focus among the available options and select them.
MaterialSideSheet
An M3 side sheet. By default it is a nonmodal standard sheet docked to its parent’s trailing edge that leaves the main content interactive; MaterialSideSheet::modal presents it over the window instead, and MaterialSideSheet::specimen renders it in place. Its controlled visibility retargets the spatial spring, including on close.
MaterialSlider
MaterialSwitch
Controlled M3 switch: a 52×32 track whose handle moves and resizes on the fast spatial spring (16dp unselected, 24dp selected or with an icon, 28dp while pressed), with a 40dp state layer, the per-state handle colors and optional check/close icons inside the handle.
MaterialTabs
M3 tabs over a caller-controlled selection.
MaterialTooltip
An M3 tooltip. With MaterialTooltip::trigger it wraps that element and shows on hover and keyboard focus; without one it renders the tooltip container in place (a specimen).
MenuGroup
A run of items; Expressive menus separate groups with a 2dp gap.
MenuPopup
A trigger that opens a MaterialMenu in Kit’s popover overlay.
NaiveDate
ISO 8601 calendar date without timezone. Allows for every proleptic Gregorian date from Jan 1, 262145 BCE to Dec 31, 262143 CE. Also supports the conversion from ISO 8601 ordinal and week date.
NaiveTime
ISO 8601 time without timezone. Allows for the nanosecond precision and optional leap second representation.
NavIcon
A destination icon in its unselected (outlined) and selected (filled) forms. Build it once and keep it: resolving symbol paths allocates.
NavItem
One destination: a unique value, the caller’s label and icon, and an optional badge. Cheap to clone; keep a list in view state.
NavigationBar
M3 Expressive flexible navigation bar: 3–5 primary destinations along the bottom of a compact or medium window, on surface-container.
NavigationDrawer
An M3 navigation drawer over caller-controlled selection and open state.
NavigationItem
One navigation destination as an M3 item: active-indicator pill, filled icon when selected, badge and label. Bars and rails compose these; a gallery may show one alone as a building block.
NavigationRail
M3 Expressive navigation rail: a 96dp column of vertical items that expands to a 220–360dp column of horizontal items, with an optional menu button and FAB above the destinations and, when expanded, section headers. The width moves on the default spatial spring.
NavigationSuite
Adaptive navigation around caller-owned content.
PaneDestination
One entry of a navigator’s history.
PaneDirective
The pane layout a size class calls for.
PaneLayout
The panes’ bounds.
PaneLayoutInput
Everything a pane layout depends on.
PaneNavigator
A destination history and the pane value it gives. Own it in an Entity and hand it to a super::PaneScaffold, which keeps its directive current.
PaneRect
A pane’s bounds in its scaffold.
PaneScaffold
A list-detail or supporting pane layout around caller-owned panes.
PaneTransition
Where a pane moves from and to.
PeriodSelector
The AM/PM selector (.Building Blocks/Period Selector), stacked (52 wide) or side by side (216 wide).
PickerDialog
A modal host for pickers: a scrim and a centered dialog over the window, built on GPUI Base’s dialog (focus trap, Escape and outside press dismissal). The surface enters on the default spatial spring.
PickerListItem
A docked month or year menu row: a 48dp list item with a leading check on the selection, which rests on a hovered-strength layer.
PickerMenuButton
The month/year dropdown trigger (.Building Blocks/Menu button): a label-large label and an 18dp arrow that points up while its list is open, on a 40dp pill. The arrow turns on the fast spatial spring.
PullArrow
The arrow’s drawing on its canvas at a distance fraction: arc and head, with the rotations Compose applies about the canvas center.
PullModel
A pull’s drag bookkeeping (Compose PullToRefreshModifierNode), in px.
PullToRefresh
Pull to refresh around caller-owned scrolling content.
RevealFocus
Scrolls scroll so a newly focused descendant is visible, once per focus change or geometry change, never while the person scrolls by hand.
RingedButton
A GPUI Base button that draws the shared M3 keyboard focus ring. It forwards the builder methods callers chain on a button, and resolves its focus handle when it renders.
SearchField
The M3 search bar: a 56dp pill on surface-container-high with a leading icon, the query and up to two trailing icons or an avatar.
SearchSuggestion
One search suggestion: a 64dp row with an optional leading element (icon or 40dp avatar), a label and optional supporting text.
SearchView
The M3 search view: a search bar that expands into a results surface.
SizedContent
An element that fills its parent and builds its content once its size is known, in the same frame.
Snackbar
M3 snackbar.
SplitButton
SuggestionChip
M3 suggestion chip: a dynamically generated suggestion, such as a reply.
TabItem
One tab: a unique value, the caller’s label (also its accessible name when only the icon shows), an optional icon and badge.
TextField
An M3 text field over a Kit input state.
ThreePaneValue
The state of all three panes.
TileGroup
One section: a quiet title above a connected group of tiles, each item on its own surface with 24px outer and 6px inner corners and 2px between tiles, at the group’s TileScale.
TimePicker
An M3 time picker over a TimePickerState.
TimePickerLabels
Every caller-supplied string of a time picker.
TimePickerState
A time picker’s state. Create it with cx.new and hand it to TimePicker.
TimeSelector
A dial picker’s hour or minute selector (.Building Blocks/Input): a 96×80 display-large box, primary-container while its unit is on the dial.
TitleBar
An application-drawn window title bar. Lay out its children with the usual style methods; it adds the leading and trailing space the platform’s buttons need and draws CaptionButtons where the platform has none. Open the window with title_bar_window_options for the same height.
Toolbar
A toolbar: caller items in a floating pill or a docked band.
ToolbarButton
A toolbar’s icon or label button.
TopAppBar
An M3 Expressive top app bar.
WindowSizeClass
The size class of a window or container.
YearChip
A year in the modal picker’s year grid (.Building Blocks/Year).

Enums§

AdaptStrategy
How a pane adapts when there is no partition for it.
AvatarContent
What an avatar shows.
BackNavigationBehavior
What “back” pops to.
BadgeColor
A badge’s container and label roles.
BadgePosition
The corner of the anchored element a badge sits on.
BottomSheetDetent
A bottom sheet’s rest position (md3.io’s State).
ButtonDensity
Group density: each step below default takes 4dp off the buttons’ height (Figma kit “Segmented button” Density 0, −1, −2).
ButtonDirection
Layout direction for logical icon placement and padding.
ButtonIconPosition
Logical placement of the optional icon, relative to the label.
ButtonShape
ButtonSize
ButtonVariant
Caption
Which caption buttons the window needs from the application.
CaptionButton
One caption button.
CardState
The interaction states of a card, including the drag the shared InteractionPreview does not cover.
CardVariant
The three M3 card variants.
CarouselLayout
A carousel’s keyline strategy.
CheckboxState
The semantic value exposed by an unstyled [Checkbox].
ChipStyle
Whether a chip is flat with an outline or raised on a tonal container.
DateInputMode
Calendar or text entry.
DateMatcher
DatePickerEvent
Events a picker emits as the person edits it.
DatePickerVariant
The M3 date picker presentations.
DatePickerView
What the picker body shows.
DateSelection
A controlled calendar value.
DayRange
Where a day sits in a selected range, for its band.
DialogActionAlignment
Where a dialog’s actions sit in their row (md3.io).
DialogAnimation
How a dialog enters and leaves (md3.io). Every animation fades; reduced motion keeps only the fade.
DialogSize
A dialog’s size (md3.io): the basic widths, or a full-screen page.
DividerContext
Explicit equivalent of the reference’s ancestor list/card margin rule.
DividerDirection
DividerOrientation
DividerVariant
DrawerPosition
Which window edge a drawer sits on.
FabColor
FAB color styles.
FabMenuAlign
Which side the items align to: the FAB’s end (a bottom-end FAB) or start (a bottom-start FAB).
FabMenuColor
The FAB menu color styles: the closed FAB and the items use the container color, the close button the solid color.
FabMenuPresentation
How a FAB menu presents its items.
FabSize
FAB container sizes. Extended FABs use the same three heights from Regular up; Small extends like Regular.
GroupLabels
When an option with an icon shows its label.
GroupSelection
How a connected group selects.
IconButtonVariant
Icon button color styles.
IconButtonWidth
The width of an icon button relative to its height.
InteractionPreview
One interaction state a specimen renders without live input.
ListDensity
Vertical density. Standard is the M3 list (56/72/88dp); Compact is the design kit’s −4 density baseline (40/56/72dp, 88dp with an overline over two supporting lines).
ListLeading
The leading element of a list item.
ListLines
How many lines an item’s text occupies, which sets its height and the leading element’s alignment.
ListTrailing
The trailing element of a list item.
LoadingShape
One of the Material shapes the loading indicator morphs between.
MenuDensity
Baseline menu density: 56, 48 or 40dp items.
MenuStyle
The menu families of the design kit.
NavBadge
An item’s badge, drawn on its icon’s top-trailing corner.
NavItemLayout
Which M3 item an item renders as.
NavigationSuiteType
Which navigation a suite shows.
NoticeKind
The tone of a notice_banner.
PaneAdaptedValue
What a pane is at the moment.
PaneAnchor
A position the drag handle settles at.
PaneMotion
How a pane moves when the value changes (Compose PaneMotion).
PaneRole
A pane’s role. List-detail: list = secondary, detail = primary. Supporting pane: main = primary, supporting = secondary. Extra is tertiary in both.
PaneRule
How many panes may sit side by side.
ProgressShape
The shape of a progress indicator’s active part.
PullToRefreshIndicator
The indicator a PullToRefresh shows.
RailAlignment
Where a rail’s destinations sit in its height.
SearchViewLayout
Where a search view shows its results.
SearchViewStyle
How a search view sets its results apart from the bar (md3.io’s Style).
SideSheetEdge
The edge a side sheet docks to.
SliderAppearance
Slider geometry. Classic matches the Google Fonts axis controls; Expressive follows the M3 Expressive thick track and vertical handle presentation.
SliderColor
The slider’s accent (md3.io’s Color option). Primary is the M3 default: a primary active track and handle over a secondary-container inactive track. The others use their own family throughout: the role for the active track and handle, its container for the inactive track, and the matching on-roles for stops and icons.
SliderSize
The M3 Expressive slider sizes (track thickness 16/24/40/56/96dp).
SplitButtonPart
One segment of a split button.
StatusKind
The tone of a status_chip; text always pairs with its tinted background.
SwitchIcons
Which states show an icon inside the handle.
TabsVariant
The two M3 tab styles.
TextFieldDensity
md3.io’s text field densities. The design kit draws one 56dp field; compact is density −2 (48dp, the M3 density scale’s 4dp steps, as the baseline menu’s compact items), with the filled label and input moved up 4dp each so the floating label keeps its 4dp gap to the input.
TextFieldVariant
The two M3 text field styles.
TileScale
The text scale of a tile’s content. Both scales share one composition; settings read one step larger than denser option panels.
TimeFormat
12-hour (with a period selector) or 24-hour.
TimeInputMode
Dial or keyboard input.
TimeOrientation
The dial picker’s layout.
TimePickerEvent
Events a picker emits as the person edits it.
TimeUnit
Which value the dial edits.
Tint
A distinct color family for a category icon: a tonal container role and the content role that pairs with it. The names are the families’ usual hues; the exact colors follow the current scheme, so every palette keeps its own ground and contrast.
ToolbarColor
Container color scheme.
ToolbarConfiguration
Where the toolbar sits.
ToolbarOrientation
TopAppBarVariant
The kit’s top app bar configurations.
Weekday
The day of week.
WindowHeightClass
A height bucket, smallest first.
WindowWidthClass
A width bucket, smallest first.

Constants§

AVATAR_SIZE
The kit’s avatar diameter in design px.
BADGE_CONTAINER
The container and label roles of both M3 badges.
BADGE_LABEL
BOTTOM_APP_BAR_HEIGHT
Height of the bottom app bar.
CARD_PADDING
Compatibility helper padding from the reference’s 16px content examples. The reference card surface itself has no padding.
CAROUSEL_ITEM_RADIUS
Item corners.
CAROUSEL_SMALL_ITEM
The smallest item a keyline strategy shows.
CHIP_HEIGHT
M3 chip geometry, in dp: 32 tall, 18dp icons 8 from the label, a 24dp avatar.
DATE_INPUT_PICKER_WIDTH
DATE_PICKER_WIDTH
Widths of the presentations, in dp.
DAY_CELL
The day cell’s square and its circular container, in dp.
DEFAULT_PANE_ANCHORS
The Compose sample’s anchors, which m3e uses by default: 0%, 240dp from the start, 50%, 240dp from the end, 100%.
DIALOG_WIDTH
The basic dialog’s container width in the design kit; M3 allows 280–560dp.
DIAL_SIZE
Radii of the dial’s rings, from the face’s center to a number’s center.
DRAWER_WIDTH
The M3 drawer width (360dp maximum).
EXPANDED_RATIO
The pressed item’s growth, as a share of its own width.
FEED_COLUMN_MIN_WIDTH
The narrowest feed column.
FEED_GAP
The space between feed items.
FEED_MARGIN
The feed’s margins from 600dp.
FEED_MARGIN_COMPACT
The feed’s margins below 600dp of its own width.
LARGE_BADGE_PADDING
Horizontal padding inside a large badge (4dp).
LARGE_BADGE_SIZE
The M3 large badge: at least 16dp square, around label-small text.
LINEAR_INDETERMINATE_MS
The indeterminate loop.
LIST_DETAIL_ORDER
List-detail’s start-to-end order: list, detail, extra.
LIST_DETAIL_STRATEGIES
List-detail panes all hide.
LIST_SEGMENT_GAP
The ground between items of a segmented list.
LIST_SEGMENT_INNER_RADIUS
Corners between neighbouring items of a segmented list.
LIST_SEGMENT_RADIUS
Outer corners of an Expressive segmented list.
LOADING_INDICATOR_SIZE
The container (48dp), from the Figma kit and Compose’s LoadingIndicatorTokens.
MEDIUM_WIDTH
The M3 medium window class starts at 600dp.
PLAIN_TOOLTIP_MAX_WIDTH
The plain tooltip’s maximum width before it wraps.
PROGRESS_THICKNESS
The default and thick track/indicator thickness.
PROGRESS_THICK_THICKNESS
PULL_TO_REFRESH_DRAG_MULTIPLIER
The drag distance counts half (Compose DragMultiplier).
PULL_TO_REFRESH_INDICATOR_SIZE
The default indicator’s container (Compose SpinnerContainerSize), in dp.
PULL_TO_REFRESH_LOADING_INDICATOR_SIZE
The loading indicator variant’s container, in dp.
PULL_TO_REFRESH_MAX_DISTANCE
How far the indicator travels at a fraction of 1 (Compose IndicatorMaxDistance), in dp.
PULL_TO_REFRESH_MIN_ALPHA
The arrow’s alpha below the threshold (Compose MinAlpha); it is 1 from it.
PULL_TO_REFRESH_SPINNER_SIZE
The arrow’s canvas and the spinner’s size (Compose SpinnerSize), in dp.
PULL_TO_REFRESH_THRESHOLD
How far (dp, after the drag multiplier) a pull must pass to refresh (Compose PositionalThreshold).
RAIL_COLLAPSED_WIDTH
The collapsed rail’s width.
RAIL_EXPANDED_WIDTH
The expanded rail’s default width (M3: 220–360dp).
RICH_TOOLTIP_WIDTH
The rich tooltip’s width in the design kit (M3 allows up to 320dp).
SCRIM_OPACITY
The scrim’s opacity over the content behind a modal surface.
SEARCH_BAR_HEIGHT
Search bar height.
SEARCH_SUGGESTION_HEIGHT
One suggestion row (a middle-aligned two-line list item).
SMALL_BADGE_SIZE
The M3 small badge: a 6dp dot. It carries no text, so it does not follow the text scale.
SNACKBAR_CLOSE_ICON
The close affordance: a 24dp icon in a 40dp target inside a 48dp box.
SUITE_PRIMARY_ACTION_PADDING
The primary action’s inset above a bar (Compose PrimaryActionContentPadding, through m3e), in dp.
SUPPORTING_PANE_ORDER
Supporting pane’s start-to-end order: main, supporting, extra.
SUPPORTING_PANE_STRATEGIES
The supporting pane reflows under the main pane; the others hide.
TEXT_FIELD_HEIGHT
Container height of a single-line field.
TEXT_FIELD_WIDTH
The default specimen width of the design kit.
TOOLBAR_FAB_GAP
Space between a floating toolbar and its paired FAB.
TOOLBAR_MARGIN
Space between a floating toolbar and the edge it hides past.
TOOLBAR_SIZE
Toolbar container height (horizontal) or width (vertical).
TOP_APP_BAR_HEIGHT
Height of a single-row (and of a collapsed flexible) top app bar.

Traits§

Datelike
The common set of methods for date component.
Timelike
The common set of methods for time component.

Functions§

accessible_text
Text on a leaf element with a label role. GPUI’s accessibility bridge does not expose plain Div text, and keeping labels on leaves stops an ancestor from replacing its controls’ accessibility.
add_months
date moved by months, clamped to the end of shorter months.
badgeDeprecated
A status label; same as status_chip, kept under its earlier name.
badge_label
The text a large badge shows for label with at most max as a count: a number above max reads “max+”; other labels pass through.
card
Compatibility appearance helper: full width and 16dp example padding. Returns CardSurface instead of the earlier Div; Styled and ParentElement chains remain supported. Use CardSurface::new for the reference’s unpadded surface, then supply caller-owned content spacing.
card_surface
Elevated compatibility helper, retaining full width and example padding.
chip
The container of an M3 assist chip: its geometry, small corners and outline-variant edge. Callers give it their label color and size; prefer AssistChip, which adds the label role, state layers and focus.
choice_radio
The M3 radio of a choice: an outlined ring, filled with a dot when selected. A static indicator for controls that are themselves the radio (e.g. a choice tile).
circular_indeterminate_frame
The reference’s six-second growing arc, including four eased rotation kicks.
circular_progress
Paint a sampled circular frame in a caller-sized box, using the reference’s 24-unit canvas and 2-unit stroke. Pass a 20×24 rem box for xs/s button slots, or 24×24 for larger buttons. The parent owns the surrounding icon slot.
circular_progress_size
The indicator box for a shape and thickness, in dp.
closest_pane_anchor
The anchor position closest to position.
collapsed_title_alpha
The collapsed title’s alpha at collapse fraction f: hidden over the first half, then fading in on an ease-in-out so it arrives as the large title leaves.
contain_scroll
A scroll area inside a scrolling page keeps the wheel while it has content to scroll, so the page does not move with it. Its own scroll listener runs first, then this one stops the event before it reaches the page.
disclosure_chevron
The chevron of an in-place disclosure; it turns over when open.
error_text
Failure feedback as one accessible alert form. Callers chain their own size and wrapping.
feed_metrics
The feed’s layout at a measured width in px, given the px of a design px at the current text scale: one column below 600dp, then as many as fit.
first_of_month
The first day of month (1-based) in year; months outside 1..=12 carry into adjacent years.
icon_spinner
A spinner standing in an icon column, at that column’s icon size.
icon_spinner_with_playback
Icon-sized variant of spinner_with_playback with the same clock policy.
indeterminate_circular_progress
Animate a bounded circular indicator while its box intersects the viewport and ancestor clip. Its original clock continues offscreen, so scrolling back does not restart playback. Reduced motion retains the sampler’s stop policy.
indeterminate_circular_progress_with_playback
Draw with a caller-owned clock, retaining phase across virtual unmounts. Frame requests remain limited to visible paint. The owner must forward offscreen reduced-motion changes to CircularProgressPlayback::observe_reduced_motion.
indeterminate_linear_progress_with_playback
Indeterminate progress with custom thickness/color and a persistent clock. The caller-supplied label names the indicator for assistive technology.
indeterminate_progress
Unmeasured work uses motion, never a fabricated completion percentage.
indeterminate_progress_with_label
indeterminate_progress named by the caller’s label for assistive technology.
indeterminate_progress_with_playback
Indeterminate progress with a caller-owned clock; see spinner_with_playback for unmounting and reduced-motion semantics.
info_callout
Standalone guidance with its own low-emphasis boundary. Inside an item, use supporting_info.
large_badge
M3 large badge: a count or short label on an error pill, label-small on on-error, at least 16dp square and full-round. The caller positions it (12dp across and 14dp down from the icon’s top-trailing corner) and supplies its text, e.g. “3” or “999+”.
linear_indeterminate_lines
The two indeterminate lines elapsed_ms into the loop, each as (tail, head) fractions of the track. A line is visible while its head leads its tail. Compose’s keyframes: the first line’s head runs over 0-1000ms and tail over 250-1250ms; the second’s head over 650-1500ms and tail over 900-1750ms, each on its own cubic easing.
linear_progress
Material 3 linear progress: the active indicator, a 4px gap, the track and a stop dot at the track’s end. Only a measured fraction draws it; None shows the indeterminate indicator at the same thickness. A paused or stopping process (muted) keeps its fraction in the outline color. The caller-supplied label names the indicator for assistive technology.
list_subheader
A list subheader: title-small on-surface-variant text heading a group of items, aligned with their 16dp padding, 48dp tall.
list_tile
The tile at index of a vertical connected list of count tiles.
loading_indicator_frame
The indeterminate indicator elapsed_ms into its loop.
material_button
Convenience constructor with caller-supplied content and activation.
monogram_initials
The initials a monogram draws: at most two characters, uppercased.
month_weeks
The weeks shown for year/month starting on first_day: always GRID_WEEKS (six) rows of seven dates, padded with adjacent-month days.
navigation_scrim
The scrim behind a modal expanded rail: scrim at 32%, fading in. Its click dismisses the rail.
navigation_suite_type
The navigation for a size class: a bar below 600dp, or when the window is under 480dp tall; a collapsed rail from 600dp; expanded_type from expanded_from. None for expanded_from never expands.
next_pane_anchor
The first anchor position right of position, wrapping to the leftmost.
notice_banner
A page-level notice: tinted surface, status icon and wrapping text. Callers append the notice’s actions, which wrap below the text when narrow.
outlined_badgeDeprecated
An outlined status label; same as outlined_status_chip, kept under its earlier name.
outlined_status_chip
A fact beside a label in the status chip’s size, outlined rather than filled: e.g. the engine a tile uses.
page_heading
A page title: text alone in the regular-weight headline role. A title longer than its column wraps rather than running past the edge.
pane_directive
The directive for a size class (Compose PaneScaffoldDirective.kt).
pane_motions
The motion of each role, in PaneRole::ALL order, for a change of value.
pane_transitions
The transition of each role, in PaneRole::ALL order. origin holds the bounds before the change and target those after it.
previous_pane_anchor
The first anchor position left of position, wrapping to the rightmost.
progress
A measured fraction as Material 3 linear progress, 4px thick.
progress_with_label
progress named by the caller’s label for assistive technology.
pull_arrow
The arrow for a distance fraction at density px per dp.
pull_loading_rotation
The loading indicator variant’s extra turn past the threshold, in degrees.
pull_vertical_offset
The indicator offset for an adjusted distance pulled: linear to the threshold, then on the tension curve, at most twice the threshold.
sample_circular_progress
Sample independently of painting so a hidden indicator keeps its phase.
section_heading
A section title with a leading icon.
section_title
An M3 list section title: a quiet medium-weight label above the group it names, on the group’s text inset.
segmented_list
An Expressive segmented list: each item on its own surface, 2dp apart, with 16dp outer and 4dp inner corners.
semantic_label
An icon column and a medium-weight text column. The slot also takes a live spinner, keeping state changes on the same axis.
sized_content
Build content from the bounds this element is given. See SizedContent.
small_badge
M3 small badge: a full-round error dot that marks new content on an icon. The caller positions it (6dp from the icon’s top-trailing corner).
spinner
A small accent spinner (16px), announced as indeterminate progress named by the caller’s label.
spinner_with_playback
A spinner whose caller-owned clock survives virtual unmounting.
standard_group_gap
The gap between items of a standard group of size buttons.
status_chip
A status label chip: a tinted pill with an optional status icon. Icon, padding and label belong to one container; callers append the label. For the M3 notification badge, see small_badge and large_badge.
supporting_info
Short supporting text inside an existing item boundary. The item supplies the surface; a second frame would compete with it. The info icon sits in a label’s icon slot, so the text starts on the label ruler.
three_pane_layout
Place the panes (Compose ThreePaneContentMeasurePolicy, without hinges).
three_pane_value
Which panes get a partition: the latest destination first, then earlier ones, then the rest by priority. With one partition and room for two stacked panes, the first pane that reflows goes under its expanded anchor.
tile
One tile of a connected group: the surface with tile_corners.
tile_chevron
The trailing chevron of a tile that opens something.
tile_info
An explanation inside a tile: the information icon and supporting text.
tinted_icon
A category or resource icon in a round tonal container. Give the size in rems where the circle shares a ruler with text, so both follow the text scale.
title_bar_control
Makes a control inside a title bar take the press itself. The whole bar is a drag area: on Windows a press there arrives as a caption press, and one no element stops goes on to the system’s move-window loop (and maximizes on a double click). Empty bar space still moves the window.
title_bar_leading
Where the bar’s own content starts: after the macOS traffic lights, or a 16px inset where the platform puts its buttons at the trailing edge.
title_bar_window_options
Window options for a window whose content draws a TitleBar height tall, centred on the main display at window_size. Extend them with struct update syntax for anything else the window needs.
today
Today’s date on the local clock, for a picker’s today marker.
traffic_light_position
Where the traffic lights go in a bar height tall: centred vertically, and as far from the leading edge as from the top, up to 20px.
week_days
The weekdays of a grid row starting at first_day.

Type Aliases§

AdaptStrategies
The adapt strategy of each role, in PaneRole::ALL order.
BadgeKindDeprecated
Former name of StatusKind: these are status labels, not M3 badges.