Styling with sx

The background colour, a palette token.

A Gaussian blur over the whole box, its radius in points.

The stroke colour, with borderWidth.

Rounds the corners — and clips the content, the background and the stroke to them.

A stroke inside the edge, in points.

A fixed height, in points.

The least height, in points.

The least width, in points.

Moves the box sideways after layout, in points — its neighbours stay where they were.

Moves the box up or down after layout, in points — its neighbours stay where they were.

How opaque the whole box is, an opacity token.

Padding on every side. A side or an axis of its own wins over it.

Bottom padding.

Left padding — the leading edge, on the native surface.

Right padding — the trailing edge, on the native surface.

Top padding.

Left and right padding.

Top and bottom padding.

Clockwise, in degrees.

Uniform, or per axis — an omitted axis stays at 1.

One of the theme's shadows — a drop, an inset highlight and a hairline ring, as the token defines.

Takes all the height the parent offers.

A fixed width, in points.

Takes all the width the parent offers.

Draws the box above or below its siblings, a z-index token.

Width over height, fitted within the proposed size. The escape hatch covers fill.

Brightens (positive) or darkens (negative) the box, from -1 to 1.

Clips the content to the box's frame.

Inverts every colour in the box.

Sizes the box relative to the nearest container: split it into count columns spacing apart and span span of them — SwiftUI's stand-in for a fractional width, which its frame lacks.

How a content change animates when one is driven natively. countsDown is numericText's.

Scales the contrast: 1 leaves it, 0 is flat grey, above 1 sharpens it.

Cascades to every control in the subtree, the SwiftUI environment way.

Holds the box at its ideal size on these axes, whatever its parent proposes.

Liquid Glass: a bare variant, or the full config. tint takes a theme token, and without a shape the glass traces the box's own borderRadius, the way strokes and shadows do.

Drains the colour, from 0 (none) to 1 (fully grey).

Invisible, but still taking up its layout space — unlike not rendering the box at all.

In degrees.

The height SwiftUI prefers when nothing constrains it — what fixedSize resolves to.

The width SwiftUI prefers when nothing constrains it — what fixedSize resolves to.

true extends into every safe area; the config narrows which regions and edges.

Who gets space first when the parent runs short — not a proportional flex weight.

Turns brightness into transparency: dark becomes clear, light stays opaque.

Escape hatch, appended last. Pass a stable array — a fresh one every render defeats the memo.

Redacts only when an ancestor applies the privacy reason — inert on its own.

Redacts this subtree — placeholder is SwiftUI's built-in skeleton. One reason here; combining several is escape-hatch territory.

Scales the saturation: 1 leaves it, 0 is grey, above 1 intensifies it.

Cascades to the controls and icons in the subtree.

Exempts this subtree from an ancestor's redacted.

This box's own placement inside a ZStack parent — Compose's per-child Modifier.align.

Fraction of the parent's height (0–1). The whole of it is tall, which works on iOS too.

Fraction of the parent's width (0–1). The whole of it is wide, which works on iOS too.

Escape hatch, appended last. Pass a stable array — a fresh one every render defeats the memo.

Proportional share of the leftover space in a Row or Column, the way flexGrow behaves.