Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These modifiers configure the visual presentation of interactive controls. controlSize scales buttons, progress views, and similar components across a discrete set of sizes; pickerStyle switches a Picker between segmented, wheel, menu, and other layouts; buttonStyle applies a fully custom rendering to a Button via defineButtonStyle. Apply these modifiers to a single control or to a container — controlSize and buttonStyle propagate to descendant controls in the hierarchy.

​
controlSize

Sets the size for controls like buttons and progress views. 
.controlSize(size: "mini" | "small" | "regular" | "large" | "extraLarge")
​
size
"mini" | "small" | "regular" | "large" | "extraLarge"
required
The control size to apply. Affects the visual size and padding of supported controls.
Small progress view 
ProgressView()
    .controlSize("small")
Large control group 
VStack([
    Button("Submit", () => submit()),
    ProgressView({ value: 0.5 })
])
    .controlSize("large")
Mini spinner 
ProgressView()
    .controlSize("mini")

​
pickerStyle

Sets the display style for a Picker component. 
.pickerStyle(style: PickerStyle): Component
​
style
PickerStyle
required
The visual style for the picker. See PickerStyle.Options: "automatic", "segmented", "inline", "menu", "navigationlink", "palette", "radiogroup", "wheel".
Segmented picker 
const body = () => {
    const [size, setSize] = useState("m")
    return Picker("Size", { value: size, setValue: setSize }, [
        Text("S").tag("s"),
        Text("M").tag("m"),
        Text("L").tag("l"),
    ]).pickerStyle("segmented")
}
Wheel picker 
const body = () => {
    const [selection, setSelection] = useState("a")
    return Picker("Option", { value: selection, setValue: setSelection }, [
        Text("Alpha").tag("a"),
        Text("Beta").tag("b"),
        Text("Gamma").tag("g"),
    ]).pickerStyle("wheel")
}
Menu picker 
const body = () => {
    const [color, setColor] = useState("red")
    return Picker("Color", { value: color, setValue: setColor }, [
        Text("Red").tag("red"),
        Text("Green").tag("green"),
        Text("Blue").tag("blue"),
    ]).pickerStyle("menu")
}

​
buttonStyle

Applies a custom button style to a Button component. 
.buttonStyle(style: ButtonStyleComponent)
​
style
ButtonStyleComponent
required
A custom button style component created with defineButtonStyle. The style controls how the button renders in its various states (normal, pressed).
Apply a custom button style 
Button("Tap me", () => handleTap())
    .buttonStyle(
        defineButtonStyle((config) =>
            Text(config.label)
                .padding(12)
                .background(
                    config.isPressed
                        ? Color("gray")
                        : Color("blue")
                )
                .foregroundStyle(Color("white"))
                .cornerRadius(8)
        )
    )

​
See also